本文将深入探讨ArkUI框架中ArkTS与H5的双向通信机制、核心API及最佳实践。

一、技术架构：ArkTS如何与H5对接

HarmonyOS通过Web组件提供了嵌入H5内容的能力。该组件继承自WebviewController，通过runJavaScript()和registerJavaScriptProxy()两个核心方法实现双向通信。

// ArkTS初始化Web组件
@Entry
@Component
struct WebComponent {
  controller: WebviewController = new WebviewController();
  
  build() {
    Column() {
      Web({
        src: $rawfile("index.html"),
        controller: this.controller
      })
      .javaScriptAccess(true)
      .onPageEnd(() => {
        // 页面加载完成后注入交互逻辑
      })
    }
  }
}

二、ArkTS 调用 H5 JavaScript 函数

​​关键技术：runJavaScript()​​

此方法可执行H5页面中的任意JS函数，并支持异步获取返回值。注意：异步

// 调用H5侧定义的getUserData函数
this.controller.runJavaScript('getUserData()')
  .then((result) => {
    console.info(`H5返回数据: ${result}`);
  }).catch((error) => {
    console.error(`JS执行错误: ${error}`);
  });
// 传递JSON对象给H5
const userInfo = {name: "Alice", level: 3};
this.controller.runJavaScript(`updateUser(${JSON.stringify(userInfo)})`);

注意哈​：H5函数需在页面加载完成后调用，建议使用onPageEnd回调触发。

三、H5 JavaScript 调用 ArkTS 原生功能

​​核心技术：registerJavaScriptProxy()​​

1. ​​注册ArkTS方法供H5调用​​

   class JsProxy {
     showToast(message: string): void {
       // 调用原生弹窗组件
       prompt.showToast({ message });
     }
   }
   
   // 注册代理对象
   this.controller.registerJavaScriptProxy(
     new JsProxy(), 
     "nativeApi", 
     ["showToast"]
   );

   四、高级场景：系统能力集成示例

   ​​在H5中调用设备摄像头​

// ArkTS侧注册相机调用接口
class DeviceProxy {
  async openCamera() {
    const result = await picker.getPhotoPicker();
    return result.photoUris[0];
  }
}

// H5通过Promise获取结果
<button onclick="window.deviceBridge.openCamera().then(uri => showImage(uri))">
  拍照
</button>

五、性能与安全实践

 通信优化策略​

减少高频小消息：合并多个操作为一个批处理调用 

 使用JSON序列化：避免在字符串拼接中产生注入风险

// 推荐：结构化参数传递
this.controller.runJavaScript(`handleData(${JSON.stringify(dataObj)})`)

安全加固方案​​

• 输入校验：在ArkTS侧验证所有来自H5的参数
• 接口限制：仅注册必要的功能接口

// 注册时限定方法白名单
.registerJavaScriptProxy(apiObj, "bridge", ["safeMethod1", "safeMethod2"])

在​​智慧屏多端协同​​场景中，ArkTS可统筹设备能力，H5实现快速迭代的UI；在​​车机系统​​中，H5适配复杂分辨率，ArkTS保障行车关键功能稳定运行。优势是​​安全的、低延迟双向通道​​