启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第18天，点击查看活动详情
Flutter系列文章列表
- 2022年了，你还不会flutter!!!
- Flutter 第一课---flutter特点及组件开发
- Flutter 第二课---组件生命周期和App生命周期
- Flutter 第三课---状态管理之Provide
- Flutter 第四课---路由管理
- Flutter 第五课 --- 包管理器和资源管理
- Flutter 第六课 --- flutter网络请求
- Flutter 第七课 --- flutter 网络封装
- Flutter 第八课 ---使用 Flutter 构建 Web 应用
- 如何正确的在flutter中添加webview
- flutter原生 与 js 交互
- flutter web 与 js 交互
- flutter web 与 js Promise 通信
- (保姆级推荐)在Flutter web中加载html是一种什么体验
前言
在之前文章中，我曾提到JS调用Flutter的其中一种方式是利用javascriptChannels发送消息来实现的。其实，JS端就是利用了postMessage的特殊规避机制，通过消息事件对象暴露给接收消息的窗口。
postMessage
语法：
[jsBridge].postMessage(message, targetOrigin);
jsBridge
是js跟flutter约定的自定义标识符，我们可以在flutter webview中，使用标识符来完成通信。
message
将要发送到flutter的数据，如果你要传递对象，需要转换为JSON格式。属性dart的同学应该知道，它是没有js对象这个概念的，在dart中，对象是Map，所以我们需要将js对象转换成JSON，再由JSON转化成Map对象
targetOrigin
通过窗口的 targetOrigin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个 URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配 targetOrigin 提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的 targetOrigin，而不是 *。
flutter postMessage 使用
Flutter 的 postMessage 方法允许在 Flutter 应用程序和其他 JavaScript 代码之间发送信息。例如，您可以使用 postMessage 方法在 Flutter 应用程序中调用 JavaScript 函数，并将数据从 JavaScript 代码发送到 Flutter 应用程序中。要使用 postMessage 方法，请在 Flutter 应用程序中使用 JavascriptChannel 对象来创建通道，然后使用 postMessage 方法将信息发送到该通道。
实现方法
在 Flutter 应用程序中创建 JavascriptChannel 对象，并为其指定一个名称。
JavascriptChannel javascriptChannel = JavascriptChannel(
name: 'MyJavascriptChannel',
onMessageReceived: (JavascriptMessage message) {
});
将 WebView 控件添加到 Flutter 应用程序中，并将 JavascriptChannel 对象添加到 WebView 的 javascriptChannels 属性中。
WebView(
javascriptChannels: <JavascriptChannel>[
javascriptChannel,
],
)
在 JavaScript 代码中，使用 window.postMessage 方法将信息发送到 Flutter 应用程序中的 JavascriptChannel。
MyJavascriptChannel.postMessage({
'message': 'Hello from JavaScript!',
}, '*');
在 Flutter 应用程序中，在 JavascriptChannel 的 onMessageReceived 回调中处理接收到的信息。
JavascriptChannel javascriptChannel = JavascriptChannel(
name: 'MyJavascriptChannel',
onMessageReceived: (JavascriptMessage message) {
print(message.message);
});
结束语
不止在flutter中通信中会用到postMessage,在web开发中，这也是一个经常出现的api,所以熟练掌握postmessage是必要的，所以抓紧学起来吧！如果你觉得你的方法更完美，可以在评论区留下你的答案，我是与你们一起成长的小安子！
