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.1SDK 6.0.1(21)DevEco Studio 6.0.1.260ROM 6.0.0.120 SP6。## 快速接入在 pubspec.yaml 中添加 git 依赖同时需要 webview_flutteryamldependencies: 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 StateWebPage createState() _WebPageState();}class _WebPageState extends StateWebPage { 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-Agentfk_user_agent、键盘工具栏keyboard_actions、设备信息device_util等。如果你的 Flutter 应用正在计划适配鸿蒙欢迎关注 CPF-Flutter 组织也欢迎参与共建。
企业数字化 ERP 产品动态
相关推荐
搞定wordpress免费插件下载完整流程避坑指南 搞定wordpress免费插件下载完整流程避坑指南 网站半夜突然挂马,后台乱码,首页被塞满博彩广告,你盯着屏幕发呆,心里只有一个念头:这破站到底怎么被黑的?别慌,这种场景我太熟了。很多时候,问题出在你为了省事,从不明来源下载的wordpre… · 2026/9/27 14:41:18
南京网站制作公司有哪些?备案避坑与最佳实践指南 南京网站制作公司有哪些?备案避坑与最佳实践指南 刚接到南京某贸易公司的单子,对方一脸愁容地问我:“哥,我看南京网站制作公司有哪些都查了一遍,但最头疼的不是设计,是备案。我填了三次都被打回来,流程一头雾水,这站还做不做得下去?”… · 2026/9/27 14:41:06
wordpress数据库查询很慢3个优化坑与注意事项 wordpress数据库查询很慢3个优化坑与注意事项 很多创业团队负责人在找建站公司时,最怕的就是被坑高价。你本来想做个简单的企业官网,结果对方报价几万,还告诉你服务器要买最贵的,域名要买带数字的,SSL证书要买企业级的。这时候你心里直打鼓… · 2026/9/27 14:41:06
3招搞定手机建立网站app最佳实践 3招搞定手机建立网站app最佳实践 不会写代码,但想在手机上建个站?别慌。很多甲方拿着手机找上门,问能不能直接在APP里把官网搞定。这需求看似简单,实则坑多。我干了十年建站,见过太多人花大钱买了个“半成品”,最后卡在备案、SEO和安全上,钱… · 2026/9/27 17:32:23
大模型上下文成本与注意力优化技术深度解析——为何O(n²)平方复杂度无法被常规优化消除 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 17:32:05
如何在手机上做网站速查手册3步避坑 如何在手机上做网站速查手册3步避坑 网站做好了没人访问,这是很多创业者最头疼的事。你花几万块做出来的页面,在电脑上看着挺高大上,但客户掏出一部手机点开,直接卡死或者排版乱飞。别急着甩锅给程序员,很多时候是你在设计阶段就埋了雷。… · 2026/9/27 17:31:40
MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现 简介:这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程,从线性调频(LFM)信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑,面向电子信息工程、计算机、数学等专业学生,适用于课程设计、期末大作… · 2026/9/27 0:00:01
汕头网站建设制作厂家避坑指南:5大注意事项救急 汕头网站建设制作厂家避坑指南:5大注意事项救急 改个需求建站公司拖一周,这种憋屈事我见得太多了。 很多汕头老板找本地建站团队,签合同前看着方案挺美,一上线就变脸。 今天不聊虚的,直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01
多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习 简介:基于PyTorch的多模态虚假新闻检测项目完整代码包,面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者,解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征,以Res… · 2026/9/27 0:00:01
MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现 简介:这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程,从线性调频(LFM)信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑,面向电子信息工程、计算机、数学等专业学生,适用于课程设计、期末大作… · 2026/9/27 0:00:01
汕头网站建设制作厂家避坑指南:5大注意事项救急 汕头网站建设制作厂家避坑指南:5大注意事项救急 改个需求建站公司拖一周,这种憋屈事我见得太多了。 很多汕头老板找本地建站团队,签合同前看着方案挺美,一上线就变脸。 今天不聊虚的,直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01
多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习 简介:基于PyTorch的多模态虚假新闻检测项目完整代码包,面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者,解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征,以Res… · 2026/9/27 0:00:01