HarmonyOS 鸿蒙Next：arkts主动与H5通信方式是什么

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

HarmonyOS 鸿蒙Next：arkts主动与H5通信方式是什么

应用主体是H5页面，在部分场景下，H5中需要主动的监听网络异常的情况下，限制功能是否可用；  如何实现在H5中监听网络异常的消息 或者 arkts如何主动与H5进行通信

Harmonyos Next教程
2 回复

1 关于前端监听网络变化，可参考：addEventListener 文档：https://juejin.cn/post/7082567435789795336

2 arkts如何主动与H5进行通信?

3 鸿蒙Web组件可以实现前端与原生页面的相互调用，这里主要讲解如何在前端获取网络变化通知原生。

首先：声明需要注册的对象

class testClass {

 constructor() {

 }

 test(): string {

   return "ArkUI Web Component";

 }

 toString(): void {

   console.log('Web Component toString');

 }

}

方案一：

[@State](/user/State) testObj: testClass = new testClass();

Web({ src: $rawfile('index.html'), controller: this.webviewController})

       // 将对象注入到web端

       .javaScriptProxy({

         object: this.testObj,

         name: "testObjName",

         methodList: ["test"],

         controller: this.webviewController

       })

方案二：

 [@State](/user/State) testObj: testClass = new testClass();

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

 this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"]);

 //使用registerJavaScriptProxy()接口注册方法时，注册后需调用refresh()接口生效

 this.webviewController.refresh();

然后：前端页面调用此方法



<!-- index.html -->

<!DOCTYPE html>

<html>

<body>

<button type="button" onclick="callArkTS()">Click Me!</button>

<p id="demo"></p>

<script>

    function callArkTS() {

        let str = testObjName.test();

        document.getElementById("demo").innerHTML = str;

        console.info('ArkTS Hello World! :' + str);

    }

</script>

</body>

</html>

在HarmonyOS鸿蒙Next系统中，ArkTS主动与H5的通信方式主要通过以下步骤实现：

  1. 创建Web组件：在ArkTS代码中创建一个Web组件，用于加载和显示H5页面。
  2. 实现桥接类：创建一个桥接类（如JSBridge），用于在ArkTS侧和H5侧之间传递消息和调用方法。
  3. 注入JavaScript对象：通过Web组件的javaScriptProxy属性，将桥接类的实例注册到H5侧的window对象上。这样，H5页面就可以通过JavaScript调用桥接类中定义的方法。
  4. H5侧调用：在H5页面中，通过JavaScript调用桥接类中注册的方法，向ArkTS侧发送请求或消息。
  5. 处理请求和响应：ArkTS侧接收H5的请求后，执行相应的操作，并通过桥接类的方法将结果返回给H5侧。

这种通信方式类似于前端的postMessage跨域通信，通过桥接类在ArkTS和H5之间建立了一个通信的桥梁。

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

回到顶部