HarmonyOS鸿蒙Next企业面试题webView与H5，H5如何调用原生的方法？

HarmonyOS鸿蒙Next企业面试中如何回答webView与H5，H5如何调用原生的方法？

方法如下： https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-webview

https://blog.csdn.net/sunhuaqiang1/article/details/145140251

简要概述：

webView与H5进行通信主要通过Web组件结合**WebviewController** 实现，具体实现步骤是定义Web组件和webView绑定，然后通过WebviewController中的createWebMessagePorts（）创建通信端口，创建好端口后通过postMessage把一个端口发送给H5，H5通过window.addEventListener监听到事件后把通信端口信息保存在全局，这样H5和WebView就可以通过postMessage发送消息，onmessage接收消息了。

详细步骤如下：

鸿蒙ArkTS与WebView之间通过 WebMessagePort 实现双向通信，核心流程包括：

• ArkTS 创建通信端口，并将其中一个端口传递给 Web 端
• Web 端接收端口，建立双向通信通道
• 双方通过 postMessage 发送消息，通过 onMessage 监听消息

1. ArkTS 端配置步骤

（1）创建 WebView 控制器

• 使用 WebviewController 管理 WebView 的生命周期和通信

（2）创建消息端口（MessagePort）

• 调用 createWebMessagePorts() 生成一对关联的端口（port1 和 port2）
• port1 发送给 Web 端，port2 留在 ArkTS 端用于接收消息

（3）发送端口给 Web 端

• 使用 postMessage() 将 port1 发送到 Web 端，通常附带一个初始化标识（如 "__init_port__"）

（4）监听 Web 端消息

• 在 port2 上设置 onMessageEvent 回调，处理 Web 端发来的消息

（5）向 Web 端发送消息

• 使用 port2.postMessageEvent() 主动发送数据到 Web 端

2. Web 端（HTML/JS）配置步骤

（1）监听 ArkTS 的初始化消息

• 使用 window.addEventListener('message', ...) 监听来自 ArkTS 的消息
• 检查消息标识（如 "__init_port__"），获取 ArkTS 发送的 MessagePort

（2）保存通信端口

• 将接收到的 MessagePort 存储到变量（如 h5Port），用于后续通信

（3）监听 ArkTS 消息

• 在 h5Port 上设置 onmessage 回调，处理 ArkTS 发来的数据

（4）向 ArkTS 发送消息

• 使用 h5Port.postMessage() 主动发送数据到 ArkTS 端