当前位置：首页 > news >正文

【HarmonyOS 5】鸿蒙Web组件和内嵌网页双向通信DEMO示例

news 来源：原创 2025/5/11 13:35:35

【HarmonyOS 5】鸿蒙Web组件和内嵌网页双向通信DEMO示例

一、前言

在 ArkUI 开发中，Web 组件（Web）允许开发者在应用内嵌入网页，实现混合开发场景。

本文将通过完整 DEMO，详解如何通过WebviewController实现 ArkUI 与内嵌网页的双向通信，涵盖 ArkUI 调用网页 JS、网页调用 ArkUI 对象的核心技术点。

二、双向通信实现原理

1、双向通信概念
Web 到 ArkUI（反向通信）通过registerJavaScriptProxy将 ArkUI 对象注册到网页的window对象，允许网页通过window.xxx调用 ArkUI 暴露的方法。

ArkUI 到 Web（正向通信）通过runJavaScript执行网页 JS 代码，支持回调获取返回值，实现原生代码调用网页函数。

2、双向通信流程图
ArkUI Web
┌──────────────┐ ┌──────────────┐
│ registerJS ├─────────────▶ window.objName │
│ (反向注册) │ ├──────────────┤
├──────────────┤ │ call test() │
│ runJavaScript├─────────────▶ execute JS code │
│ (正向调用) │ ├──────────────┤
└──────────────┘ └──────────────┘

三、双向通信实现步骤

1、ArkUI 定义可被网页调用的对象
创建一个TestObj类，声明允许网页调用的方法（白名单机制）：

class TestObj {// 网页可调用的方法1：返回字符串test(): string {return "ArkUI Web Component";}// 网页可调用的方法2：打印日志toString(): void {console.log('Web Component toString');}// 网页可调用的方法3：接收网页消息receiveMessageFromWeb(message: string): void {console.log(`Received from web: ${message}`);}
}

2、ArkUI 组件核心代码
初始化控制器与状态

@Entry
@Component
struct WebComponent {// Webview控制器controller: webview.WebviewController = new webview.WebviewController();// 注册到网页的ArkUI对象@State testObj: TestObj = new TestObj();// 注册名称（网页通过window.[name]访问）@State regName: string = 'objName';// 接收网页返回数据@State webResult: string = '';build() { /* 组件布局与交互逻辑 */ }
}

布局与交互按钮，添加三个核心功能按钮：

Column() {// 显示网页返回数据Text(`Web返回数据：${this.webResult}`).fontSize(16).margin(10);// 1. 注册ArkUI对象到网页Button('注册到Window').onClick(() => {this.controller.registerJavaScriptProxy(this.testObj,  // ArkUI对象this.regName,  // 网页访问名称["test", "toString", "receiveMessageFromWeb"]  // 允许调用的方法白名单);})// 2. ArkUI调用网页JSButton('调用网页函数').onClick(() => {this.controller.runJavaScript('webFunction("Hello from ArkUI!")',  // 执行网页JS代码(error, result) => {  // 回调处理返回值if (!error) this.webResult = result ||