# jsBridge_Harmony

**Repository Path**: wander6/js-bridge-harmony

## Basic Information

- **Project Name**: jsBridge_Harmony
- **Description**: 鸿蒙版jsBridge
- **Primary Language**: Unknown
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2024-10-12
- **Last Updated**: 2025-05-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: harmony, jsbridge

## README

# jsBridge_Harmony

#### 介绍
鸿蒙版jsBridge


#### 安装教程

1.  导入依赖

`"@htools/js_bridge": "file:../dependencies/js_bridge.har"`


#### 鸿蒙端使用说明

1.  使用JsWeb

```
  webviewController: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      JsWeb({ webUrl: 'index.html', webviewController: this.webviewController})
      }
        .width('100%')

    }
```
参数说明：
|  参数名 |  说明 |   |
|---|---|---|
|  webUrl | 要加载的链接地址，支持在线链接以及本地html文件  |   |
|  webviewController | web webviewController |   |

2.  添加jsMethod

新建类继承JsMethod，并实现toNative方法：
```
export class JsTest extends JsMethod {
  toNative(params: string, callback: WebCallback): void {
    super.toNative(params, callback)
    Log.w("toNative api callback : " + params)
    const paramsObject: JsItem = JSON.parse(params);
    Log.w("toNative api callback type : " + paramsObject.type)
    if (callback.jsCallback) {
      callback.jsCallback(new Map([
        ["aaaa", "bbbbb"],
        ["cccc", "ddddd"],
      ]))
      // callback.jsCallback(true)
    }
    if (callback.wvCallback) {
      callback.wvCallback(new Map([
        ["aaaa", "bbbbb"],
        ["cccc", "ddddd"],
      ]))
    }
  }
}
```

#### H5使用说明

1.  兼容ios、Android端的WebViewJavascriptBridge
```
// 初始化 WebViewJavascriptBridge
function setupWebViewJavascriptBridge(callback) {
      if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
      if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
      window.WVJBCallbacks = [callback];
      var WVJBIframe = document.createElement('iframe');
      WVJBIframe.style.display = 'none';
      WVJBIframe.src = 'https://__bridge_loaded__';
      document.documentElement.appendChild(WVJBIframe);
      setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0)
}

// 注册方法，给原生调用
setupWebViewJavascriptBridge(function (bridge) {
    bridge.registerHandler('getH5Info', function (data, responseCallback) {
        console.log('原生调用 getH5Info 方法传递的参数', JSON.stringify(data))
        // JS 返回给原生的数据
        var responseData = { 'H5Info': 'xxxxx' }
        responseCallback(responseData)
    })
})

// JS 调用原生端注册的方法
function testGetNativeInfo() {
    setupWebViewJavascriptBridge(function(bridge) {
        bridge.callHandler('getNativeInfo', { 'key': 'value' }, function (response) {
                  console.log('JS 获取到原生侧给的数据', response)
            })
    })
}
```
2.  使用window.harmony

```
 window.harmony.callNative({"type":"xxx","key":"xxx","value":"xxx",}, (data) => {
            console.log('JS 获取到原生侧给的数据', response)
        })
```