Flutter和JS通信初步 2023-07-19 周三

简介

在项目中，遇到了Flutter和JS通讯的需求。

WebView插件

webview_flutter

JS调用Flutter

有两个方法，一个是JavascriptChannels，另外一个方法拦截url；这里选择JavascriptChannels

• Flutter端：

JavascriptChannel _alertJavascriptChannel(BuildContext context) {
 return JavascriptChannel(
  name: 'Toast',
  onMessageReceived: (JavascriptMessage message) {
   showToast(message.message);
  });
 }

WebView(
 avascriptChannels: <JavascriptChannel>[
  _alertJavascriptChannel(context),
 ].toSet(),
;

• 上面的Toast就是通讯的名字；message就是JS往Flutter传的信息。JavascriptMessage对象就一个String类型的message成员。
• 如果要传对象参数，需要将对象转成JSON字符串，然后再传递。所以，JS和Flutter之间的通信，只支持字符串。

• JS端：采用postMessage方法调用Flutter提供的方法就可以。

<button onclick="callFlutter()">callFlutter</button>

function callFlutter(){
 Toast.postMessage("JS调用了Flutter");
}

• Toast就是Flutter端定义好的方法名，postMessage的参数就是传给Flutter的message

• Flutter方法执行之后的返回值，无法再回传到JS端。

Flutter调用JS

• 这个用得比较少，也不是很安全。主要是通过WebViewController执行脚本的方式进行。

• 尝试了一下，alert()和Console.log()等方法都看不出效果。感觉有点鸡肋。

参考文章

详解Flutter WebView与JS互相调用简易指南