第5篇：Flutter 与 ArkTS 通信机制详解

# Flutter × 鸿蒙实战30讲（5）：Flutter 与 ArkTS 通信机制详解

> 作者：烟云任平生  
> 发布时间：2025年12月5日  
> 标签：`#Flutter` `#OpenHarmony` `#通信` `#JavaScriptProxy` `#CSDN`

---

### 一、为什么需要通信？

Flutter Web 运行在 WebView 沙箱中，**无法直接调用 OpenHarmony 原生能力**（如文件、摄像头）。  
必须通过 **JS ↔ ArkTS 双向桥接** 实现功能打通。

---

### 二、ArkTS 向 Flutter（JS）发送消息

#### 1. 在 ArkTS 中注册代理对象

```ts
// MainPage.ets
aboutToAppear() {
  this.controller.registerJavaScriptProxy({
    object: {
      // 提供给 Web 调用的方法
      showToast: (msg: string) => {
        // 调用原生弹窗（需引入 promptAction）
        alert(msg);
        return true;
      },
      getDeviceModel: () => {
        return "OpenHarmony PC";
      }
    },
    name: "OHBridge", // 在 JS 中通过 window.OHBridge 调用
    interface: ["showToast", "getDeviceModel"]
  });
}
. 在 Flutter Web 中调用
修改 lib/main.dart，在需要处执行 JS：
import 'dart:html' as html;

void callNative() {
  final bridge = html.window['OHBridge'];
  if (bridge != null) {
    bridge.callMethod('showToast', ['Hello from Flutter!']);
    final model = bridge.callMethod('getDeviceModel');
    print('Device: $model');
  }
}
💡 注意：需在 flutter build web 时保留 dart:html 支持。
三、Flutter（JS）向 ArkTS 发送消息
可通过 postMessage + onMessage 实现：

. ArkTS 监听消息
Web({ ... })
.onMessage((event) => {
  console.log('Received from Flutter:', event.data);
  // 处理业务逻辑
})
. Flutter 中发送
html.window.postMessage('{"action":"saveData","content":"test"}', '*');
四、安全建议
验证消息来源（检查 event.url）
避免暴露敏感 API（如文件写入需二次确认）
🔜 下一篇预告：《第6讲：屏幕适配实战：鸿蒙多设备下的 Flutter 响应式布局》

❤️ 如果这篇帮你打通了通信瓶颈，请点赞支持！