需要先初始化webview.WebMessagePort，然后一个ets使用，发送一个端口给html去用。
来个视频展示一下效果（文件有点大，1.8M，估计要载入一会儿）：
6月25日
这里的流程蛮有意思的，画个图解释一下。
鸿蒙html通信
ets端
// ...
const HARMONY_PORT = 0;
const HTML_PORT = 1;
// ...
export default struct AppWebViewPage {
// ...
build() {
Web({
src: this.url,
controller: this.webviewController,
})
.onPageEnd(() => {
try {
this.ports = this.webviewController.createWebMessagePorts() || \[\];
// 这里会返回2个端口。
// 有点类似于 实例化了一个网页和鸿蒙之间发送消息的管道，然后把管道的两个头作为端口返回回来
// 所以这里就有有2个端口，也就是这个通信管道的2个头
// 那么
// 1. 使用 HARMONY_PORT 端口，作为鸿蒙的端口，用来发送和接收消息
// 2. 使用 HTML_PORT 端口，作为html的端口，把这个端口通过 HARMONY_PORT 端口发给html，让html来使用。
if (!this.ports || this.ports.length < 2) {
hilog.error(1, 'Error', '创建端口失败：返回端口数量不足');
return;
}
/* 端口0, 给鸿蒙端使用 /
this.portsHARMONY_PORT.onMessageEvent((result: webview.WebMessage) => {
this.onMessageEvent(result);
});
/ 端口1, 发送给html进行使用 /
this.webviewController.postMessage('init__project', this.ports\[HTML_PORT], ' ');
} catch (e) {
hilog.error(1, 'Error', '初始化 WebMessagePort 失败：' + JSON.stringify(e));
}
})
}
/**
- 接收到H5消息
- @param result
*/
private onMessageEvent(result: webview.WebMessage) {
let msg = '';
try {
msg = result.toString() || '';
hilog.info(1, 'INFO', 'onMessageEvent：' + msg);
} catch (e) {
hilog.error(1, 'Error', '获取消息字符串失败：' + JSON.stringify(e));
return;
}
}
/**
- 向H5发布消息
- @param message
*/
public sendMessageToH5(message: string) {
hilog.info(1, 'INFO', 'sendMessageToH5：' + message);
try {
this.portsHARMONY_PORT.postMessageEvent(message);
} catch (error) {
hilog.error(1, 'Error', '向H5发布消息失败：' + JSON.stringify(error));
}
}
}
html 端
Harmony H5 Demo
H5 Page
发送消息到鸿蒙侧
日志记录