README.en.md · bocmbci/ohos_cordova

# ohos_cordova

## Description

> Cordova is a traditional cross-platform development framework that allows H5 to invoke the capabilities of native platforms such as Android and iOS through a set of code. Cordova establishes a bridge between native (Android, iOS, OpenHarmony) and web platforms through a standardized approach, encapsulating the specific execution logic of each platform in a plug-in manner, hiding platform differences, and providing a set of interfaces for web use, enabling web technology to run on mobile devices.
> 
> Compared to mainstream cross-platform development frameworks, Cordova's advantages are mainly reflected in its simplicity, lightweight nature, and compatibility.
> 
> Simplicity: Cordova is based on native WebView encapsulation with no new development language, making it easy to access;
> 
> Lightweight: The source code has around 10,000 lines, the plugin size is small, and the application intrusiveness is low;
> 
> Compatibility: Cordova is based on system Webview implementation, which ensures high compatibility.
> 
> In the field of cross-platform development, before 2019, Cordova was ranking third among global respondents, demonstrating a certain level of influence. Therefore, Cordova plugins can provide some assistance for the development of OpenHarmony applications.
>
> ![cordova_statistics](images/cordova_statistics.jpg)
>

## Instructions

> OpenHarmony application access to Cordova is very simple, only two steps are needed.

### 1. Customize the plugin

Cordova plugin is an mechanism for extending the functionality of Cordova applications, which can access device information, camera, network status, and so on, providing rich functions for the Web side. Before defining the plugin, the native OpenHarmony and Web sides need to define the name of the plugin, the method names contained in the plugin, the method parameters, and the method callback information.

The plugin of the OpenHarmony framework is CordovaPlugin, custom plugins need to inherit it, and rewrite the execute() method, reference the following example:

```
/**
 * Login plugin
 * Determine login status, get user information, etc.
 */
export class LoginPlugin extends CordovaPlugin{

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

try {
      //Parameter parsing, argsJson is a json array.
      // 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;
    }
  }

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

/**
   * Determine if logged in.
   * @param callbackContext  
   */
  judgeLogin(callbackContext: CallbackContext){
    let result = 'true';
    callbackContext.success(result)
  }

/**
   * Jump to login
   * @param callbackContext  
   */
  login(callbackContext: CallbackContext){
    let result = '1';
    callbackContext.success(result)
  }

/**
   * Get customer information
   * @param callbackContext 
   */
  getUserInfo(callbackContext: CallbackContext){
    let user = new User('user1', '00001');
    callbackContext.success(JSON.stringify(user))
  }

}
```

### 2.Container configuration

```

（1）The Cordova framework implements Cordova interaction through the WebView engine, defined as follows:
   private url: Resource = $rawfile('cordovademo/index.html');
   private systemWebViewEngine: SystemWebViewEngine = new SystemWebViewEngine(getContext(), new webview.WebviewController());

（2）Configure the plugins used by the current container:

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）Initialize the container:

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%')
  }
```

## Software architecture
````
|---- ohos_cordvoa
|     |---- entry  # Example code folder
|     |---- cordova  # cordova Library folder
|               |----engine # engine folder
|                   |----SystemWebViewEngine # WebView engine, unified external interface, supports plugin configuration, etc.
|                   |----SystemExposedJsApi  # Native interface exposed to H5
|                   |----JsProxyObj  #  Native proxy exposed to Js
|               |---- CallbackContext  # Callback, support success and failure handling
|               |----CordovaBridge  #  Native and H5 interaction bridge
|               |----CordovaInterface  # Provides methods for WebView to interact with Ability, including lifecycle, dynamic permissions, etc.
|               |----CordovaInterfaceImpl  #  Implementation of CordovaInterface
|               |----CordovaPlugin  # Encapsulation of plugins
|               |----CoreHarmony  # Default plugin, provides native basic capabilities for H5 use
|               |----NativeToJsMessageQueue  # Native message queue
|               |----PluginEntry  # Plugin entry class, including plugin name, class name, loading method, etc.
|               |----PluginManager  # Plugin management class, supports plugin initialization and invocation of plugin methods
|               |----PluginResult  # Encapsulation of invocation results
|           |---- index.ts  # Public interface
|     |---- README.MD  #  Installation and usage instructions  
              
````

## Contribution code
If you find any problems in the use process, you can raise  [Issue](https://gitee.com/bocmbci-test/ohos_cordova/issues) to us.

bocmbci/ohos_cordova

简介

发行版

贡献者

近期动态

bocmbci/ohos_cordova .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

bocmbci/ohos_cordova