HarmonyOS 鸿蒙Next ArkWeb组件实现兼容JsBridge调用的H5页面，代码如何实现？

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙Next ArkWeb组件实现兼容JsBridge调用的H5页面，代码如何实现？

您好，我们APP之前采用的是融合开发技术，就是Android原生跟H5通过JSBridge进行互调的方式实现的。现在开发鸿蒙版APP，我们不想在H5页面上进行大规模改造，想还是适配之前的H5页面，这样就导致鸿蒙ArkWeb组件开发这里需要实现JsBridge的调用方式，请问这块代码应该怎么实现？

问题场景描述： 原先的Android端调用H5的方式如下： 这段代码实现的H5通过“getIDCard”函数触发读取身份证动作给原生，然后原生开始读身份证信息，获取信息成功后通过原生调用H5方法“idCardInfo”将信息返回给H5页面，H5页面进行处理。

private void getIDCard(){
  webview.registerHandler("getIDCard", new BridgeHandler() {
    @Override
    public void handler(String data, CallBackFunction function) {
      NFCReadHelper nfcReadHelper= NFCReadHelper.INSTANCE;
      MIdCardInfo mIdCardInfo = new MIdCardInfo();
      mIdCardInfo = startReadIdCard();
      String json = new Gson().toJson(new H5Result(new Status(NET_SUCCESS, ""),mIdCardInfo));
      webview.callHandler("idCardInfo", json, new CallBackFunction() {
        @Override
        public void onCallBack(String data) {
          nfcReadHelper.stopReadIDCard();
        }
      });
    }
  });
}

然后在H5端相应代码如下：

getIDCard:function (){
  JsBridge.callHandler(
    "getIDCard",
    JSON.stringify(null),
    null
  );
  //安卓-》H5 回参
  JsBridge.registerHandler('idCardInfo', function (data) {
    var resultData = JSON.parse(data);
    if (resultData.result.code=="1") {
      alert (resultData.resultSet.username+","+resultData.resultSet.birthday);
      //('#writeResult').text = resultData.data;
    } else {
      alert ("身份证读取失败");
    }
  })
},

现在我们不想更改H5代码，在鸿蒙开发中利用ArkWeb组件，应该怎么实现原先Android的这个功能呢？


更多关于HarmonyOS 鸿蒙Next ArkWeb组件实现兼容JsBridge调用的H5页面，代码如何实现？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

我记得有个三方库可以实现，在H5和原生调用之前在加一层JS，H5需要额外引用这个JS就可以了。

文档：[@yue/webview_javascript_bridge](https://ohpm.openharmony.cn/#/cn/detail/)

更多关于HarmonyOS 鸿蒙Next ArkWeb组件实现兼容JsBridge调用的H5页面，代码如何实现？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中，实现ArkWeb组件兼容JsBridge调用的H5页面，可以通过以下步骤进行代码实现：

  1. 配置ArkWeb组件： 在config.json中配置ArkWeb组件，确保已正确引入ArkWeb相关的模块和权限。

  2. 创建ArkWeb实例： 在JavaScript代码中，通过ArkWeb提供的API创建ArkWeb实例。例如：

    let arkWebView = new ArkWebView({
    container: document.getElementById('arkWebContainer'),
    src: 'path/to/your/h5/page.html'
});

  3. 实现JsBridge接口： 在ArkWeb组件中，通过定义特定的接口来实现JsBridge功能。这通常涉及在H5页面中调用特定的JavaScript函数，然后在ArkWeb组件的Java部分进行相应处理。例如，在H5页面中：

    function callNativeFunction(data) {
    window.JsBridge.callHandler('nativeFunction', data, function(response) {
        console.log('Native response:', response);
    });
}

  4. 处理JsBridge调用： 在ArkWeb组件的Java代码中，通过监听JsBridge的调用并处理。这通常涉及实现一个接口来接收和处理来自H5页面的调用。

  5. 返回结果给H5页面： 处理完调用后，将结果返回给H5页面，通过JsBridge的回调机制实现。

请注意，以上步骤提供了一个大致的实现框架，具体实现可能因项目需求而有所不同。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html，

回到顶部