Flutter 鸿蒙化实战：flutter_jsbridge_plugin 适配 OpenHarmony## 前言随着鸿蒙生态的快速发展，越来越多的 Flutter 应用需要适配 OpenHarmony 平台。但生态早期，大量常用三方库只有 Android / iOS 实现，鸿蒙侧只能自己造轮子。为了解决这个问题，CPF-Flutter 社区对一批高频使用的 Flutter 三方库做了 OpenHarmony 平台适配，统一托管在 GitCode 的 CPF-Flutter 组织 下，全部通过 TAG 版本隔离、配套门禁编译验证，开箱即用。本篇是系列文章之一，主角是 flutter_jsbridge_plugin —— WebView 与 JS 桥接插件。## flutter_jsbridge_plugin 是什么flutter_jsbridge_plugin（原库 0.0.5）为 Flutter 的 WebView 提供一套 JS 与 Dart 双向调用的桥接能力，非常适合在 App 内嵌 H5 页面、需要与原生功能打交道的场景：- Dart → JS：调用 WebView 页面里的 JS 方法（callHandler），传参并接收返回值；- JS → Dart：注册原生处理器（registerHandler），让 H5 调用 App 的能力（如跳转原生页面、读取设备信息、拉起支付等）。鸿蒙版需与 webview_flutter 配合使用，实现方式与 iOS / Android 完全一致。## 适配情况| Flutter 框架版本 | TAG 名称 | 分支名 || — | — | — || 3.7 | 0.0.5-ohos-1.0.1 | master || 3.22 | 0.0.5-ohos-1.0.1 | master || 3.27 | 0.0.5-ohos-1.0.1 | master || 3.35 | 0.0.5-ohos-1.0.1 | master |已验证环境（3.35 为例）：Flutter 3.35.8-ohos-0.0.1；SDK 6.0.1(21)；DevEco Studio 6.0.1.260；ROM 6.0.0.120 SP6。## 快速接入在 pubspec.yaml 中添加 git 依赖（同时需要 webview_flutter）：yamldependencies: flutter_jsbridge_plugin: git: url: https://gitcode.com/CPF-Flutter/fluttertpc_flutter_jsbridge_plugin.git # 按你的 Flutter 框架版本，从上方映射表选择对应 TAG ref: 0.0.5-ohos-1.0.1 webview_flutter: ^4.0.0执行：bashflutter pub get## 使用示例### 注入桥接并注册原生处理器dartimport 'package:flutter/material.dart';import 'package:webview_flutter/webview_flutter.dart';import 'package:flutter_jsbridge_plugin/jsbridge.dart';class WebPage extends StatefulWidget { const WebPage({super.key}); @override State<WebPage> createState() => _WebPageState();}class _WebPageState extends State<WebPage> { late final WebViewController _controller; late final JsBridge _jsBridge; @override void initState() { super.initState(); _controller = WebViewController(); _jsBridge = JsBridge(_controller); // H5 调用 App：注册「打开原生页面」处理器 _jsBridge.registerHandler('openNativePage', (data) { // data 为 H5 传来的参数 Navigator.of(context).pushNamed('/detail', arguments: data); }); _controller.loadRequest(Uri.parse('https://example.com')); _jsBridge.webviewHandler = _controller; } @override Widget build(BuildContext context) { return Scaffold( body: WebViewWidget(controller: _controller), ); }}### Dart 调用 JSdart// 调用 WebView 里的 JS 函数，传入参数并接收返回值final result = await _jsBridge.callHandler('someJsFunction', {'key': 'value'});## API 支持一览| API | 说明 | ohos 支持 || — | — | — || callHandler | Dart 调用 JS 方法 | yes || registerHandler | 注册 JS 调用 Dart 的处理器 | yes || webviewHandler | 绑定 WebViewController | yes |> [!TIP] ohos Support 为 yes 表示鸿蒙平台支持该能力，使用方式与 iOS / Android 保持一致。> [!NOTE] 使用要点：桥接依赖 WebView 的 JS 注入，需在页面加载完成后调用；H5 侧主动调用原生时，要确保已 registerHandler。## 仓库地址- OpenHarmony 适配仓库：https://gitcode.com/CPF-Flutter/fluttertpc_flutter_jsbridge_plugin- 使用问题反馈：请到 CPF-Flutter 社区 Issues 提交问题（社区统一收集跟进）；本仓库 Issues 区亦可。## 系列预告截至目前，CPF-Flutter 社区已完成 250+ 个 Flutter 三方库的 OpenHarmony 平台适配，覆盖权限管理、UI 组件、设备信息、位置服务、媒体处理、网络、支付等多个领域，完整的适配清单（含每个库的版本映射表）见：- 适配总览文档：https://gitcode.com/CPF-Flutter/docs/blob/main/ThirdpartyLibrarites.md- 仓库组织：https://gitcode.com/CPF-Flutter本系列后续会陆续挑选高频库展开讲解，比如支付宝支付（tobias）、User-Agent（fk_user_agent）、键盘工具栏（keyboard_actions）、设备信息（device_util）等。如果你的 Flutter 应用正在计划适配鸿蒙，欢迎关注 CPF-Flutter 组织，也欢迎参与共建。