Flutter Web通过webview_flutter与Flutter APP通信失败问题咨询

错误原因 #

当前Flutter Web端的调用方式存在本质错误：

• webview_flutter 注入的JavascriptChannel，本质是在WebView的JS全局作用域挂载了与channel同名的全局对象（本案例中为window.Toast），原生JS中直接调用Toast.postMessage()是操作这个注入的自定义对象，和浏览器原生的window.postMessage()API完全无关。
• 代码中调用的html.window.postMessage()是浏览器原生跨上下文通信API，该API的第二个参数要求传入合法的目标源（origin，格式为协议+域名+端口，例如https://flutter.dev），传入字符串"Toast"不符合参数规范，因此抛出语法错误。

正确实现步骤 #

1. Flutter Web 端配置 #

首先在Flutter Web项目的pubspec.yaml中添加js包依赖，用于Dart与JS的互操作：

dependencies:
  js: ^0.6.7 # 版本请与自身Flutter SDK版本匹配

然后编写通信代码，通过JS互操作调用WebView注入的全局Channel对象：

import 'package:js/js.dart';

// 声明绑定全局作用域下的Toast对象
@JS('Toast')
class AppToastChannel {
  external static void postMessage(String message);
}

// 触发通信的方法
void sendMessageToApp() {
  AppToastChannel.postMessage("message from flutter web page");
}

2. Flutter APP 端配置 #

原有JavascriptChannel代码无需任何修改，保持原有逻辑即可正常接收Web端传递的消息、触发SnackBar弹窗。

扩展说明 #

如果需要实现APP向Flutter Web的反向通信，逻辑和普通JS Web场景完全一致：

• Flutter Web端通过JS互操作在window上挂载供APP调用的全局方法
• APP端通过WebViewController.runJavascript()方法直接调用该全局方法即可

内容的提问来源于stack exchange，提问作者Liu Silong