Flutter webview_flutter库postMessage在安卓模拟器无法正常工作

问题原因 #

Android WebView的全局环境中存在原生的postMessage API（浏览器Web API的一部分），你自定义的JavascriptChannel命名为postMessage，和原生API重名导致冲突。Android端会优先识别原生方法，因此找不到你定义的JavascriptChannel对应的方法，而iOS WebView的全局变量处理逻辑不同，不会出现该冲突。

解决方案 #

修改JavascriptChannel的名称以避免和原生Web API重名，同时同步调整JS代码中的调用名称。

修改后的Flutter代码

WebView(
  javascriptMode: JavascriptMode.unrestricted,
  debuggingEnabled: true,
  initialUrl: '<url_to_my_template>',
  onPageStarted: (url) {},
  onPageFinished: (url) async {},
  javascriptChannels: <JavascriptChannel>{
    JavascriptChannel(
      // 修改名称为FlutterPostMessage，避免冲突
      name: 'FlutterPostMessage',
      onMessageReceived: (message) async {
        print('postMessage: ${message.message}');
      },
    ),
  },
  onWebViewCreated: (WebViewController controller) {
    setState(() {
      _controller = controller;
    });
  },
),

修改后的JS代码

function troca_dados_envia(obj){
    "use strict";
    // 使用修改后的JavascriptChannel名称
    FlutterPostMessage.postMessage(JSON.stringify(obj));
    // 注：JavascriptChannel的postMessage不支持目标源参数，故去掉"*"
}

补充说明 #

JavascriptChannel提供的postMessage方法仅需传递消息内容，原生window.postMessage的目标源参数在这里不需要，去掉后可避免不必要的逻辑混淆。

内容的提问来源于stack exchange，提问作者Lucas Pulsz