Flutter 中 JavaScript(JS)与 Dart 双向通信实现方案
基于官方 webview_flutter 插件的通信方式
基于官方 webview_flutter 插件的通信方式
在 pubspec.yaml 中添加
添加 webview 包 方便后面使用,记得 pub get 更新
1 | dependencies: |
配置自己使用的 js 路径地址信息, 该地址位于项目根目录中添加对应 js 文件
1 | flutter: |
静态 js 文件,建立通道
1 | function test(){ |
postMessage 通道的核心概念
- postMessage 本质是 Flutter 为 WebView 提供的跨端通信接口,专门用于 JavaScript → Flutter 的数据传递(单向主动推送)。你可以把它理解成:
- Flutter 在 WebView 里 “预埋” 了一个名为 FlutterJsChannel(你自定义的名称)的 “消息信箱”;
- JS 端只要往这个 “信箱” 里丢消息(调用 postMessage),Flutter 端的 onMessageReceived 回调就会立刻收到并处理。
WebView 加载的 HTML/JS 中,通过 window.通道名称.postMessage(数据) 发送消息
dart 文件 创建 web 交互 方法定义
通过 runJavaScript(jsCode); 调用项目 内部方法
1 | import 'package:webview_flutter/webview_flutter.dart'; |
- WebViewController()
- 创建一个 WebView 的控制器实例,用来管理 WebView 的所有行为(加载页面、JS 交互、样式设置等)。
- ..setJavaScriptMode(JavaScriptMode.unrestricted)
- 开启 WebView 的 JavaScript 支持:
- JavaScriptMode.unrestricted:完全允许 JS 执行(默认是禁用的),这是 Flutter 和 JS 交互的前提。
- 如果设为JavaScriptMode.disabled,则 WebView 中的 JS 代码无法运行,通信通道也会失效。
- ..setBackgroundColor(Colors.white)
- 设置 WebView 的背景颜色为白色(默认可能是透明或灰色),优化视觉效果。
..loadHtmlString("""<html><body></body></html>""")- 加载一段空的 HTML 字符串到 WebView 中(也可以用loadUrl加载远程网页)。这里加载空页面,说明核心目的是通过 JS 通道接收数据,而非展示网页内容。
- ..addJavaScriptChannel(…)
- 这是核心逻辑:创建 Flutter 和 JS 之间的通信通道,实现JS 主动向 Flutter 发送数据:
- “FlutterJsChannel”:通道的唯一标识,JS 端必须通过这个名称调用(比如window.FlutterJsChannel.postMessage(‘要传递的数据’))。
- onMessageReceived:回调函数,只要 JS 调用了postMessage,这个回调就会实时触发(也就是你注释里说的 “持续回调,无需主动触发”)。
- JavaScriptMessage message:回调的参数,message.message是 JS 传递的原始数据(字符串类型)。
- 回调内的逻辑
- print(“【通道回调触发】:收到数据 -> ${message.message}”):打印 JS 传递的数据,用于调试验证。
- _updateAnimeList(message.message):调用自定义方法处理数据(比如解析数据、更新动漫列表)。
- 注释的setState:如果需要更新 Flutter 的 UI(比如把数据展示在页面上),必须用setState触发页面刷新。
项目启动类
1 | void main() |
WidgetsFlutterBinding.ensureInitialized() 是 Flutter 应用的 “基础引擎初始化”,为所有 Widget 和异步操作提供运行环境。
Web 平台 - Dart 与 JS 通信
@JS
@JS() 是 package:js 库提供的元注解(装饰器),作用是建立 Dart 代码和 JS 代码的映射关系。你可以把它理解成:给 Dart 代码贴一个 “标签”,告诉 Dart 编译器 “这段代码要对应到 JS 中的某个东西”。
传递 Dart 函数给 JS(回调)
用 @allowInterop 注解(@JS() 配套),可以把 Dart 函数作为回调传给 JS。
- @JS() 是 Dart 与 Web 端 JS 交互的核心注解,用于建立 Dart 代码和 JS 变量 / 函数 / 对象的映射关系。
- 使用时必须导入 package:js,且被注解的成员需加 external 关键字。
- 配套 @allowInterop 可实现 Dart 函数作为回调传给 JS,仅支持 Web 平台。
