Flutter3.32 中使用 webview4.13 与 vue3 项目的 h5 页面通信，以及如何调试

随着App混合开发越来越多，如何与h5通信成为一个基础技能，根据最新的版本，实现一个 demo 和一份文档。

github 地址flutter 端(只实现了 android)：github.com/SuiShanpu/h...

github 地址 h5 端：github.com/SuiShanpu/h...

一、准备工作

1、工具与版本

App 端开发环境

Flutter 3.32.5
Dart 3.8.1
webview_flutter 4.13.0

Web 端开发环境

node: 22.13.0
node: 10.9.2
vue 3.5.25
vite 7.2.4

开发工具:

App 端: Android Studio Narwhal 3 Feature Drop | 2025.1.3
Web 端: Visual Studio Code (1.106.3)

2、分别创建新的 App 项目和 Web 项目，并实现基本功能

Flutter 工程创建参考: 创建第一个 Flutter 项目

Vue3 工程创建参考: 创建一个 Vue 应用

App端: 可以从首页面跳转到一个新的页面(WebviewPage)

Web端: 页面内包含2个按钮，点击后更改文本内容。

二、通信

webview 组件只能与要渲染 html 首页面进行通信；因为用的是 vue 组件，因此多了一层通信。

整个通信，用的是全局的 window 对象。

1、vue组件 --> webview

在 vue 组件需要的地方触发，传递参数

js 复制代码

// 传递 string 格式
function onUseFlutter() {
  window.flutterBridge.postMessage('来自 h5 Home 页面的消息');
}

// 传递 json 格式
function onUseJsonFlutter() {
  window.jsonBridge.postMessage(
    JSON.stringify({ text: '来自 h5 Home 页面的消息' })
  );
}

在 webview 中注册事件，添加处理函数: 在 web 页面中就会注册一个 window.xxxx 对象。

dart 复制代码

// 与H5页面进行通信的桥梁
_webViewController.addJavaScriptChannel(
  // 会在H5的window上挂载一个FlutterBridge对象，该对象包含一个postMessage方法发送数据给flutter
  "flutterBridge",
  onMessageReceived: (JavaScriptMessage jsMsg) {
    // 根据 h5 传递的数据类型进行接收
    String message = jsMsg.message; 

    // todo something
  }
);

// 接收 json 对象数据
_webViewController.addJavaScriptChannel(
  // 会在H5的window上挂载一个FlutterBridge对象，该对象包含一个postMessage方法发送数据给flutter
  "jsonBridge",
  onMessageReceived: (JavaScriptMessage jsMsg) {
    // 如果是 json 对象，则需要使用 jsonDecode 解析
    Map<String, dynamic> message = jsonDecode(jsMsg.message);

    // todo something
  }
);

注意: 'flutterBridge' 名称是自定义的，需要对应一致。

2、webview --> html首页面

在 webview 中触发脚本

dart 复制代码

// 从flutter 发送信息
_sendFlutterTestMessage() async {
  // 构造要传递的参数（支持任意类型：对象、数组、字符串、数字等）
  final Map<String, dynamic> msgFlutter = {
    "msg": "这是 flutter 中的传递过来的值",
  };

  // 调用 h5 页面中脚本方法
  _webViewController.runJavaScript('''
    receiveFromFlutter(${jsonEncode(msgFlutter)});
  ''');
}

在 html 首页面中添加函数脚本

js 复制代码

function receiveFromFlutter(data) {
  console.log("receiveFromFlutter data:", data);
}

3、html首页面 --> vue组件

在 html 首页面中触发 window 自定义事件（定义自定义事件）

js 复制代码

function receiveFromFlutter(data) {
  // 创建自定义事件并携带数据
  const flutterEvent = new CustomEvent("flutter-to-home", { detail: data }); 
  // 触发事件
  window.dispatchEvent(flutterEvent); 
}

在 vue 组件需要的地方绑定 window 事件 (组件销毁时移除事件)

js 复制代码

onMounted(() => {
  window.addEventListener('flutter-to-home', useFlutterMessage);
});

onBeforeUnmount(() => {
  window.removeEventListener('flutter-to-home', useFlutterMessage);
});

function useFlutterMessage(ev) {
  const data = ev.detail;
  console.log("使用 fluter 中的值 data:", data);
}

3次通信都完成后，一个完整的通信完成，一次操作结束。

三、调试

使用 vConsole 插件。在 html首页面添加如下脚本内容。

js 复制代码

<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
<script type="text/javascript">new VConsole();</script>

四、结语

与h5通信还有很多其他的内容，比如多语言、权限等。后面很有很长的路要走！