HarmonyOS 鸿蒙Next ArkWeb组件实现兼容H5页面中JsBridge.registerHandler('funcName', function (data) {...}) 方法

HarmonyOS 鸿蒙Next ArkWeb组件实现兼容H5页面中JsBridge.registerHandler(‘funcName’, function (data) {…}) 方法 您好，我想咨询一下怎样用您给的例子https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_NEXT-SelectContact，实现原生对H5页面的调用和回调呢？

现在是这样，我用tutorials_NEXT-SelectContact例子的方法实现了H5页面对鸿蒙原生程序的调用和回调，但是现在我们还有一个场景，就是原生程序对H5页面的调用，在Android端，我们原来采用如下这种方式对H5页面进行调用

webview.callHandler("shareResult", new Gson().toJson(returnData), new CallBackFunction() {
  @Override
  public void onCallBack(String data) {
    Log.e("MainActivity", "H5ToNativeGetShareStringMsg:" + data);
  }
});

在H5页面端，我们采用如下代码进行接收

JsBridge.registerHandler('shareResult', function (data) {
  var resultData = JSON.parse(data);
  if (resultData.result) {
    alert ("1111:" + resultData.result);
  } else {
    alert ("2222");
  }
})

我想请教一下，在H5页面程序不做大改造的情况下，在鸿蒙端应该怎么实现这种原生程序对H5的调用功能呢？最好还是基于tutorials_NEXT-SelectContact例子的方式，能实现这个原生程序对H5的调用么？


更多关于HarmonyOS 鸿蒙Next ArkWeb组件实现兼容H5页面中JsBridge.registerHandler('funcName', function (data) {...}) 方法的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

原生调用H5，直接使用官网的话，通过runJavaScript()调用，如果想对标Android，也有一个三方库dsBridge，可以参考其中的实现思路

三方库：[https://ohpm.openharmony.cn/#/cn/detail/@hzw%2Fohos-dsbridge](https://ohpm.openharmony.cn/#/cn/detail/@hzw%2Fohos-dsbridge)

更多关于HarmonyOS 鸿蒙Next ArkWeb组件实现兼容H5页面中JsBridge.registerHandler('funcName', function (data) {...}) 方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，Next ArkWeb组件用于加载和渲染Web内容。若要在ArkWeb中实现兼容H5页面中的JsBridge.registerHandler('funcName', function (data) {...})方法，你需要通过ArkWeb提供的JavaScript接口与原生应用进行通信。

ArkWeb提供了window.postMessage API来实现Web内容与原生应用的双向通信。为了在鸿蒙系统中模拟JsBridge.registerHandler的功能，你可以设置一个监听器来捕获特定类型的消息，并根据消息内容调用相应的处理函数。

示例代码如下：

// 在Web页面中设置监听器
window.addEventListener('message', function(event) {
    if (event.data && event.data.type === 'invokeHandler') {
        const { handlerName, data } = event.data;
        if (handlerName === 'funcName') {
            // 调用对应的处理函数
            handleFuncName(data);
        }
    }
});

function handleFuncName(data) {
    // 处理数据的逻辑
    console.log('Received data:', data);
    // 根据需要返回结果给原生应用
    // 可以使用 window.postMessage 发送消息回原生应用
}

在原生鸿蒙应用中，你需要通过ArkWeb的postMessage方法发送消息到Web内容，并监听Web内容的响应。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html，

回到顶部