HarmonyOS鸿蒙Next中H5页面如何与ArkTS交互

HarmonyOS鸿蒙Next中H5页面如何与ArkTS交互 问题现象

目前javaScriptProxy仅支持同步调用，异步调用无法获取执行结果。

解决措施

对javaScriptProxy和runJavaScript封装，实现JSBridge通信方案。适用于H5调用原生侧函数。使用Web组件javaScriptProxy将原生侧接口注入到H5的window对象上，通过runJavaScript接口执行JS脚本到H5中，并在回调中获取脚本执行结果。具体调用流程如下图所示：

  • 首先通过Web组件的javaScriptProxy属性，将JSBridgeHandle对象注册到H5的window上，作为H5调用原生的通道。当H5开始加载时，在onPageBegin生命周期中调用initJSBridge()方法初始化JSBridge。

  • 在initJSBridge方法中，通过webviewControll.runJavaScript()将JSBridge初始化脚本注入H5执行。当H5调用时，生成window.callID标识回调函数，将callID与调用参数使用JSBridgeHandle.call传到原生侧。通过JSBridgeCallback接收原生侧执行的结果，根据callID找到对应callback执行并且释放内存.

  • JSBridgeHandle.call()是H5调用原生接口的统一入口，在该方法中根据H5调用的方法名，匹配到对应接口去调用。调用结束后通过this.callback()方法将调用结果返回H5。callback方法中使用webviewControll.runJavaScript()调用H5的JSBridgeCallback回传callID和调用结果。


更多关于HarmonyOS鸿蒙Next中H5页面如何与ArkTS交互的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

可以将promise处理内容放在arkts这边处理，不传递到html侧就行了。

更多关于HarmonyOS鸿蒙Next中H5页面如何与ArkTS交互的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


请问注入多个JavaScript对象到window对象中，有相应方法吗？每个对象下面都有方法

使用registerJavaScriptProxy注册，

已经实现了，

楼主能否提供demo的源码，我对比一下看看跟这个demo（[https://developer.huawei.com/consumer/cn/forum/topic/0204135282874792129?fid=0101587866109860105](https://developer.huawei.com/consumer/cn/forum/topic/0204135282874792129?fid=0101587866109860105）的差异在哪里。

目前论坛找到的demo，都存在各种问题，官方文档也没有详细的说明，体验实在是糟糕。

目前Api 9的模拟器是否无法进行交互？我下载了官方demo，跑起来后发现无法交互。

模拟器不行，真机可以，

难怪。

请问有那几款真机现在可以正常跑Api 9甚至更高版本？我的P40可以正常安装，但没法正常使用，需要开启GPU强制渲染才能刷新，不然一直黑屏。但开启这个功能后，眼睛受不了😖，

官方回复说的是mate 40以上才能正常，我的nova 6跟你一样，页面不刷新，需要开启surface更新或者使用scrcpy投屏，

您好：我们的H5代码是这样调用原生的，我用您给的代码修改了一下，发现H5不能调用原生方法。

并且我用官方给的例子写出来的代码，也无法交互

请问问题出在哪里了 谢谢回复

你注册的是objName.test合objName.toString两个方法, 但调用的是platformApp.startDhgateService方法. 注册和调用不匹配，

在HarmonyOS鸿蒙Next中，H5页面与ArkTS交互主要通过WebView组件的postMessage和onMessage机制实现。首先，在ArkTS中创建WebView组件并加载H5页面。通过postMessage将数据从ArkTS发送到H5页面，H5页面通过window.addEventListener监听消息并处理。反之，H5页面通过window.parent.postMessage发送消息，ArkTS通过onMessage接收并处理。这种双向通信机制实现了H5与ArkTS的无缝交互。

回到顶部