Flutter中，html 与 dart 桥接沟通

flutter_inappwebviewwebview_flutterdart 调用 html 方法dart其实就是dart向html发送消息使用webViewController.runJavaScript方法执行一段js脚本。// 使用 postMessage 发送 webViewController.runJavaScript( window.postMessage($message, *); );若为map需要先转换为json字符串避免引号冲突。htmlconst handleMessage (event: MessageEvent) { const data event.data // 解析消息内容... } // 添加窗口消息监听器 window.addEventListener(message, handleMessage)html 调用 dart 方法dart通过JavaScriptChannel来实现监听html发送的消息的功能。先向页面添加JavaScriptChannel//添加 JavaScript 通道用于接收 H5 消息 webViewController.addJavaScriptChannel(FlutterChannel, onMessageReceived: (JavaScriptMessage message) { handleH5Message(message.message); // 这就是处理html发送的消息的方法 });html这里的FlutterChannel是在dart端通过addJavaScriptChannel方法添加的在网页端不需要声明。// 使用 FlutterChannel 通道发送消息匹配 Flutter 端的 JavaScriptChannel try { if ((window as any).FlutterChannel) { (window as any).FlutterChannel.postMessage(JSON.stringify(message)) console.log(通过 FlutterChannel 发送消息到 Flutter:, message) } else { console.warn(FlutterChannel 未定义无法发送消息到 Flutter) } } catch (error) { console.error(发送到 Flutter 失败:, error) }flutter_inappwebviewdart 调用 html 方法dart其实就是dart向html发送消息使用webViewController.evaluateJavascript方法执行一段js脚本。// 使用 postMessage 发送 webViewController?.evaluateJavascript( source: window.postMessage($value, *);, );若为map需要先转换为json字符串避免引号冲突。htmlconst handleMessage (event: MessageEvent) { const data event.data // 解析消息内容... } // 添加窗口消息监听器 window.addEventListener(message, handleMessage)html 调用 dart 方法dart通过JavaScriptChannel来实现监听html发送的消息的功能。先向页面添加JavaScriptChannel// 添加 JavaScript Handler 用于接收 H5 消息 webViewController!.addJavaScriptHandler( handlerName: FlutterChannel, // --- 这个需要和 html 中的 handlerName 一致 callback: (message) { if (message.isEmpty) { return; } handleH5Message(message[0]); }, );html这里的FlutterChannel是在dart端通过addJavaScriptChannel方法添加的在网页端不需要声明。// 使用 flutter_inappwebview 通道发送消息匹配 Flutter 端的 JavaScriptChannel try { if ((window as any).flutter_inappwebview) { // 调用 Dart 端的 handlerName 并发送数据 (window as any).flutter_inappwebview.callHandler(FlutterChannel, message) console.log(use flutter_inappwebview send to Flutter:, message) } else { console.warn(flutter_inappwebview undefine) } } catch (error) { console.error(Send to Flutter failed: , error) }