HarmonyOS 使用WebViewJavascriptBridge第三方库进行JS交互

https://ohpm.openharmony.cn/#/cn/detail/@yue%2Fwebview_javascript_bridge是可以实现h5调用的。

参考写法：

var callbackButton2 = document.getElementById('buttons').appendChild(document.createElement('button'))
callbackButton2.innerHTML = '原生注册方法--，h5 从原生获取信息'
callbackButton2.onclick = function (e) {
  e.preventDefault()
  log('JS 调用方法 "getNativeInfo2" 方法')
  bridge.callHandler('getNativeInfo2', { 'key': 'value' }, function (response) {
    log('JS 获取到数据', response)
  })
}

然后在ets中的setupWebViewJavascriptBridge再注册个方法
this._bridge.registerHandler('getNativeInfo2', (data: Object, responseCallback: WVJBResponseCallback) => {
  if (data) {
    this._toast("JS 调用 getNativeInfo2 \n原生接收到参数：" + WebViewJavascriptBridgeTools.jsonStringify(data));
  }
  // 返回数据
  let map: Record<string, Record<string, string>> = {
    "deviceInfo": {
      "types": "测试",
      "debug": "2",
    },
    "userInfo": {
      "userId": "111",
      "member_name": "用户名",
    }
  }
  const jsonStr: string = WebViewJavascriptBridgeTools.jsonStringify(map);
  responseCallback(jsonStr);
});
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

这就实现了原生向js传递数据，要传什么在返回数据里面传。