# ohos_cordova_0

**Repository Path**: ling-heng/ohos_cordova

## Basic Information

- **Project Name**: ohos_cordova_0
- **Description**: 开发和维护跨平台适配能力，以插件的形式为Web提供原生接口，让Web应用适配OpenHarmony的能力。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://gitee.com/openharmony-sig/ohos_cordova
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 23
- **Created**: 2024-03-12
- **Last Updated**: 2024-06-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ohos_cordova

## 介绍 
> Cordova是一套传统的跨端开发框架，可以让H5通过一套代码调用原生端Android、iOS平台的能力。Cordova通过一套标准的方法建立起原生（Android、iOS、HarmonyOS）与Web端的桥接方式，以插件化的方式将每个平台的具体执行逻辑进行封装，隐藏平台间的差异，一套接口供Web端使用，使得Web技术可以在移动设备上运行。
>
> 相比于主流的跨端开发框架，Cordova的优势主要体现为简单、轻量、兼容。
>
> 简单：Cordova基于原生WebView进行封装，无新的开发语言，接入门槛低；
>
> 轻量：源码行数在1w行左右，插件体积较小，对应用侵入性低；
>
> 兼容：Cordova基于系统Webview实现，兼容性高。
>
> 在跨端领域，2019年之前Cordova仅次于Flutter、React Native，其知名度在全球受访者中所占比例排名第三，具有一定的影响力，可见，Cordova插件对于鸿蒙应用的开发具有一定的助力作用。
>
> ![cordova_statistics](images/cordova_statistics.jpg)
>



## 鸿蒙Cordova使用说明

> 鸿蒙应用接入Cordova非常简单，只需要如下两个步骤。


### 1.自定义插件


Cordova插件是一种用于扩展Cordova应用程序功能的机制，这些插件可以访问设备信息、相机、网络状态等，为Web端提供了丰富的功能。在定义插件之前，鸿蒙原生、Web端需规定好插件的名称、插件包含的方法名、方法参数、方法回调信息。

鸿蒙框架的插件为CordovaPlugin，自定义插件需要继承之，并重写execute()方法，参考如下样例：

```
/**
 * 登录插件
 * 判断登录状态、获取用户信息等
 */
export class LoginPlugin extends CordovaPlugin{

  execute(action: string, args: string, callbackContext: CallbackContext): boolean{
    let status: number = PluginResultStatus.OK;
    let result = "";

    try {
      //参数解析, argsJson为json数组
      // let argsJson = JSON.parse(args)

      if(action === "clickBack"){
        this.clickBack(callbackContext)
      }
      else if(action === "judgeLogin"){
        this.judgeLogin(callbackContext)
      }
      else if(action === "login"){
        this.login(callbackContext)
      }
      else if(action === "getUserInfo") {
        this.getUserInfo(callbackContext);
      }
      // callbackContext.sendPluginResult(new PluginResult(status, result));
      return true;
    } catch (e) {
      callbackContext.sendPluginResult(new PluginResult(PluginResultStatus.JSON_EXCEPTION, "json_exception"));
      return false;
    }
  }

  /**
   * 点击返回
   * @param callbackContext  回调
   */
  clickBack(callbackContext: CallbackContext){
    let result = '点击返回';
    callbackContext.success(result)
  }

  /**
   * 判断是否登录
   * @param callbackContext  回调
   */
  judgeLogin(callbackContext: CallbackContext){
    let result = 'true';
    callbackContext.success(result)
  }

  /**
   * 跳转到登录
   * @param callbackContext  回调
   */
  login(callbackContext: CallbackContext){
    let result = '1';
    callbackContext.success(result)
  }

  /**
   * 获取客户信息
   * @param callbackContext  回调
   */
  getUserInfo(callbackContext: CallbackContext){
    let user = new User('user1', '00001');
    callbackContext.success(JSON.stringify(user))
  }

}
```


### 2.容器配置


```

（1）Cordova框架通过WebView引擎来实现Cordova交互,定义如下：
   private url: Resource = $rawfile('cordovademo/index.html');
   private systemWebViewEngine: SystemWebViewEngine = new SystemWebViewEngine(getContext(), new webview.WebviewController());

（2）配置当前容器所用到的插件：

  aboutToAppear(){
    let merchantPluginEntry: PluginEntry = new PluginEntry("loginBridge", LoginPlugin, undefined, false);
    let pluginEntryList: List<PluginEntry> = new List();
    pluginEntryList.add(merchantPluginEntry);

    this.systemWebViewEngine.init(new CordovaInterfaceImpl(null), pluginEntryList);
  }

（3）初始化容器：

build() {
    Column() {
      Web({ src: “url地址”, controller: this.systemWebViewEngine.getViewController()})
        .zoomAccess(false)
        .fileAccess(true)
        .javaScriptAccess(true)
        .width('100%')
        .height('100%')
        .onPrompt(this.systemWebViewEngine.onPromptCallBack())
        .onAlert(this.systemWebViewEngine.onAlertCallBack())
        .onConfirm(this.systemWebViewEngine.onConfirmCallBack())
        .onProgressChange(this.systemWebViewEngine.onProgressChangedCallback())
        .javaScriptProxy(this.systemWebViewEngine.getJsProxy())
    }
    .width('100%')
    .height('100%')
  }
```




## 软件架构
````
|---- ohos_cordvoa
|     |---- entry  # 示例代码文件夹
|     |---- cordova  # cordova库文件夹
|               |----engine # 引擎
|                   |----SystemWebViewEngine # webView引擎，对外统一接口，支持插件配置等
|                   |----SystemExposedJsApi  # 原生对H5暴露的接口
|                   |----JsProxyObj  #  原生给Js暴露的代理
|               |---- CallbackContext  # 回调，支持成功、失败的处理
|               |----CordovaBridge  # 原生、H5交互的桥
|               |----CordovaInterface  # 提供WebView对Ability交互的方法，包括生命周期、动态权限等
|               |----CordovaInterfaceImpl  # CordovaInterface的实现
|               |----CordovaPlugin  # 插件的封装
|               |----CoreHarmony  # 默认插件，提供原生基础能力供H5使用
|               |----NativeToJsMessageQueue  # 原生消息队列
|               |----PluginEntry  # 插件入口类，包括插件名、类名、加载方式等
|               |----PluginManager  # 查件管理类，支持插件的初始化以及插件方法的调用
|               |----PluginResult  # 调用结果封装
|           |---- index.ts  # 对外接口
|     |---- README.MD  # 安装使用方法    


              
````

## 贡献代码
使用过程中发现任何问题都可以提 [Issue](https://gitee.com/bocmbci-test/ohos_cordova/issues) 给我们.