HarmonyOS 鸿蒙Next：arkts如何主动与H5进行通信

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

HarmonyOS 鸿蒙Next：arkts如何主动与H5进行通信 在部分场景下，H5中需要主动的监听网络异常的情况下，限制功能是否可用；

如何实现在H5中监听网络异常的消息 或者 arkts如何主动与H5进行通信

Harmonyos Next教程
3 回复

1 关于前端监听网络变化，可参考：addEventListener 文档

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

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

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

class testClass {
  constructor() {}

  test(): string {
    return "ArkUI Web Component";
  }

  toString(): void {
    console.log('Web Component toString');
  }
}

方案一：

@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 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>

参考文档

原生应用与前端页面的相互调用：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-use-frontend-page-js-V5

更多关于HarmonyOS 鸿蒙Next：arkts如何主动与H5进行通信的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


首先, H5 是嵌套在webview 中的. 这个问题也就是webview中怎么调用H5 中的方法. 举例来说, H5 中提供一个方法, 设置网络状态. 在arkTs 端, 根据网络情况动态调用H5的方法, 应该就可以实现目标需求. webview 和H5的交互, 可以参考文档: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-in-app-frontend-page-function-invoking-V5

在HarmonyOS（鸿蒙）Next中，arkts（ArkUI的TS版本）与H5（HTML5）之间的通信主要通过特定的接口或机制来实现。arkts作为鸿蒙系统的原生UI框架，支持多种方式与外部内容进行交互，包括与H5页面的通信。

要实现arkts主动与H5通信，通常可以通过以下方式：

  1. 使用WebView组件：arkts可以通过内嵌的WebView组件加载H5页面，并利用WebView提供的JavaScript接口与H5页面进行双向通信。arkts可以调用WebView的evaluateJavascript方法执行H5页面的JavaScript代码，从而实现向H5发送消息。

  2. 事件机制：arkts可以定义自定义事件，并通过事件总线或消息队列等方式将事件传递给H5页面。H5页面监听这些事件并作出响应，实现arkts到H5的通信。

  3. 共享状态管理：在某些情况下，arkts和H5可以共享同一个状态管理工具（如Redux、Vuex等），通过修改共享状态来实现通信。

需要注意的是，具体的通信方式可能因鸿蒙系统的版本、arkts的实现以及H5页面的框架等因素而有所不同。开发者应根据实际情况选择最适合的通信方式。

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

回到顶部