删除线格式 ## 【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 webR