HarmonyOS鸿蒙Next中如何实现原生页面主动与H5进行通信

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

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

4 回复

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中如何实现原生页面主动与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中，原生页面与H5页面之间的通信可以通过WebView组件提供的WebMessagePort接口实现。具体步骤如下：

  1. 创建WebView并加载H5页面：在原生页面中，使用WebView组件加载H5页面。
import webview from '@ohos.web.webview';

let webView = webview.WebView.createInstance();
webView.loadUrl('https://example.com');
  1. 创建WebMessagePort：通过WebView创建WebMessagePort实例，用于与H5页面进行通信。
let ports = webView.createWebMessagePorts();
let port1 = ports[0];
let port2 = ports[1];
  1. 绑定端口并发送消息：将port1绑定到H5页面，并通过port2发送消息。
webView.postMessage('initPort', [port1], '*');

port2.onmessage = (event) => {
    console.log('Received message from H5:', event.data);
};

port2.postMessage('Hello from Native');
  1. 在H5页面中接收消息：在H5页面中，通过window.onmessage事件监听来自原生页面的消息，并通过MessagePort进行通信。
window.onmessage = (event) => {
    if (event.data === 'initPort') {
        let port = event.ports[0];
        port.onmessage = (e) => {
            console.log('Received message from Native:', e.data);
            port.postMessage('Hello from H5');
        };
    }
};

通过以上步骤，原生页面与H5页面可以实现双向通信。

在HarmonyOS鸿蒙Next中，原生页面与H5页面通信可以通过WebView组件实现。具体步骤如下：

  1. 原生调用H5方法：使用WebView的runJavaScript方法执行H5页面中的JavaScript函数。

    webView.runJavaScript("window.jsFunction()");

  2. H5调用原生方法：通过WebView的addJavascriptInterface方法注册一个Java对象，H5页面可以通过该对象调用原生方法。

    webView.addJavascriptInterface(new JsBridge(), "nativeBridge");

  3. 双向通信：结合上述两种方式，可以实现原生页面与H5页面的双向通信。

确保在config.json中配置WebView的权限和网络访问权限。

回到顶部