Flutter 鸿蒙化实战：flutter_webview_plugin 适配 OpenHarmony，内嵌网页轻松加载

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)执行 JavaScript；3.导航控制：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 组织，也欢迎参与共建。