Flutter 鸿蒙化实战flutter_webview_plugin 适配 OpenHarmony## 前言随着鸿蒙生态的快速发展越来越多的 Flutter 应用需要适配 OpenHarmony 平台。但生态早期大量常用三方库只有 Android / iOS 实现鸿蒙侧只能自己造轮子。为了解决这个问题CPF-Flutter 社区对一批高频使用的 Flutter 三方库做了 OpenHarmony 平台适配统一托管在 GitCode 的CPF-Flutter 组织 下全部通过 TAG 版本隔离、配套门禁编译验证开箱即用。本篇是系列文章之一主角是flutter_webview_plugin—— 内嵌 WebView 插件。## flutter_webview_plugin 是什么flutter_webview_plugin原库 0.4.0是一个以全局插件方式提供的内嵌网页控件1.加载网页launch(url, headers, ...)打开一个网页2.JS 注入evalJavascript(code)执行 JavaScript3.导航控制reload/goBack/goForward、canGoBack/canGoForward判断导航4.关闭close()关闭 WebView。## 适配情况| Flutter 框架版本 | TAG 名称 | 分支名 || — | — | — || 3.7 | 0.4.0-ohos-1.0.1 | master || 3.27 | 0.4.0-ohos-1.0.1 | master || 3.35 | 0.4.0-ohos-1.0.1 | master |## 快速接入在 pubspec.yaml 中添加 git 依赖yamldependencies: flutter_webview_plugin: git: url: https://gitcode.com/CPF-Flutter/fluttertpc_flutter_webview_plugin.git # 按你的 Flutter 框架版本从上方映射表选择对应 TAG ref: 0.4.0-ohos-1.0.1执行bashflutter pub get## 使用示例dartimport package:flutter_webview_plugin/flutter_webview_plugin.dart;final webview FlutterWebviewPlugin();// 打开网页监听加载完成webview.onStateChanged.listen((state) { if (state.type WebViewState.finishLoad) { print(页面加载完成); }});await webview.launch( https://example.com, withJavascript: true,);// 注入 JSawait webview.evalJavascript(document.title;);// 后退await webview.goBack();## API 支持一览| API | 说明 | ohos 支持 || — | — | — || launch(url, …) | 打开网页 | yes || evalJavascript(code) | 执行 JS | yes || reload / close | 刷新 / 关闭 | yes || goBack / goForward | 后退 / 前进 | yes || canGoBack / canGoForward | 判断能否后退 / 前进 | yes | [!TIP] ohos Support 为 yes 表示鸿蒙平台支持该能力使用方式与 iOS / Android 保持一致。## 仓库地址- OpenHarmony 适配仓库https://gitcode.com/CPF-Flutter/fluttertpc_flutter_webview_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本系列后续会陆续挑选高频库展开讲解比如传感器motion_sensors、扫码识别qrcode_flutter、应用设置open_app_settings等。如果你的 Flutter 应用正在计划适配鸿蒙欢迎关注 CPF-Flutter 组织也欢迎参与共建。