鸿蒙Next ArkTS与H5通信方法

如何在鸿蒙Next中使用ArkTS与H5页面进行双向通信？希望能了解具体的实现方法，比如调用方式、参数传递和回调处理等细节，最好能提供简单的代码示例。

2 回复

鸿蒙Next里，ArkTS和H5通信就像两个邻居隔墙喊话。用WebviewController的postMessage()发消息，H5那边用window.onmessage接。反过来H5用window.parent.postMessage()，ArkTS用onMessageEvent收。记得两边约定好暗号（消息格式），别喊错人！

更多关于鸿蒙Next ArkTS与H5通信方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，ArkTS与H5（Web组件）的通信主要通过WebviewController实现双向交互。以下是具体方法及示例代码：

1. ArkTS调用H5方法

使用runJavaScript执行H5中的JavaScript函数。

ArkTS侧代码：

import webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      // 加载H5页面
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .onPageEnd(() => {
          // 页面加载完成后调用H5的jsFunction方法
          this.controller.runJavaScript('jsFunction("Hello from ArkTS!")');
        })
    }
  }
}

H5侧代码（index.html）：

<script>
  // 定义被ArkTS调用的函数
  function jsFunction(message) {
    document.getElementById("msg").innerHTML = message;
  }
</script>

2. H5调用ArkTS方法

通过WebMessagePort建立双向通信通道：

ArkTS侧代码：

// 1. 创建消息端口
private msgPort: WebMessagePort = null;

aboutToAppear() {
  // 2. 创建消息端口并注册回调
  this.msgPort = this.controller.createWebMessagePort();
  this.msgPort.onMessageEvent((result: WebMessage) => {
    // 接收H5发送的数据
    console.log('Received from H5:' + result.getData());
  });

  // 3. 将端口注入到H5的window对象中
  this.controller.postMessage('__init_port__', [this.msgPort], '*');
}

// 4. 定义供H5调用的方法
@ExposeToWeb({ name: 'arktsMethod' })
arktsMethod(param: string) {
  console.log('H5调用成功，参数：' + param);
  return 'ArkTS响应数据';
}

H5侧代码：

// 接收ArkTS注入的端口
window.addEventListener('message', (event) => {
  if (event.data === '__init_port__') {
    window.arkPort = event.ports[0];
    
    // 向ArkTS发送消息
    arkPort.postMessage('Hello from H5!');
    
    // 调用ArkTS暴露的方法
    if (window.arktsMethod) {
      let result = window.arktsMethod('H5参数');
      console.log('ArkTS返回：' + result);
    }
  }
});

关键要点：

  1. 权限配置：在module.json5中声明网络权限：
    "requestPermissions": [
  { "name": "ohos.permission.INTERNET" }
]
  2. 安全限制：需使用$rawfile加载本地H5，或配置domStorageAccess启用跨域访问。
  3. 数据类型：支持字符串、数字等基本类型，复杂数据需序列化。

通过以上方法即可实现ArkTS与H5的高效双向通信。

回到顶部