企业官网建设流程全解析

Flutter 鸿蒙化实战：flutter_inappwebview 适配 OpenHarmony

前言

随着鸿蒙生态的快速发展，越来越多的 Flutter 应用需要适配 OpenHarmony 平台。但生态早期，大量常用三方库只有 Android / iOS 实现，鸿蒙侧只能自己造轮子。

为了解决这个问题，CPF-Flutter 社区对一批高频使用的 Flutter 三方库做了 OpenHarmony 平台适配，统一托管在 GitCode 的 CPF-Flutter 组织 下，全部通过 TAG 版本隔离、配套门禁编译验证，开箱即用。

本篇是系列文章之一，主角是flutter_inappwebview—— 功能最全的 Flutter WebView 插件。

flutter_inappwebview 是什么

flutter_inappwebview（原库 6.1.5）是 Flutter 生态功能最强大的 WebView 插件，鸿蒙版适配了核心能力：

• 内嵌 H5：InAppWebView组件直接嵌入网页，配合InAppWebViewController控制；
• JS 与原生双向：evaluateJavascript调用页面 JS、addJavaScriptHandler让 H5 回调原生；
• 加载控制：loadUrl、reload、goBack、canGoBack等导航方法；
• 请求/URL 拦截：shouldOverrideUrlLoading、shouldInterceptRequest。

典型场景：活动页、支付/登录 H5、内嵌文档/富文本等。

适配情况

[!NOTE] 鸿蒙版当前适配 3.7 / 3.22 / 3.35 三个 Flutter 版本（3.27 未在 README 兼容列表中）。

快速接入

在 pubspec.yaml 中添加 git 依赖：

dependencies:flutter_inappwebview:git:url:https://gitcode.com/CPF-Flutter/flutter_inappwebview.git# 按你的 Flutter 框架版本，从上方映射表选择对应 TAGref:6.1.5-ohos-1.0.0

执行：

flutter pub get

使用示例

内嵌网页 + JS 调用

import'package:flutter/material.dart';import'package:flutter_inappwebview/flutter_inappwebview.dart';classWebPageextendsStatefulWidget{constWebPage({super.key});@overrideState<WebPage>createState()=>_WebPageState();}class_WebPageStateextendsState<WebPage>{InAppWebViewController?_controller;@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText('WebView'),actions:[IconButton(onPressed:()async{finaltitle=await_controller?.getTitle();// 调用页面里的 JSawait_controller?.evaluateJavascript(source:'window.hi && window.hi()');ScaffoldMessenger.of(context).showSnackBar(SnackBar(content:Text('标题：$title')));},icon:constIcon(Icons.refresh),),],),body:InAppWebView(initialUrlRequest:URLRequest(url:WebUri('https://example.com')),onWebViewCreated:(controller)=>_controller=controller,onLoadStop:(controller,url){/* 加载完成 */},shouldOverrideUrlLoading:(controller,action){// 拦截指定跳转，如跳转原生returnNavigationActionPolicy.CANCEL;},),);}}

H5 调用原生

// Dart 侧注册处理器_controller?.addJavaScriptHandler(handlerName:'openNative',callback:(args)=>Navigator.of(context).pushNamed('/detail',arguments:args),);

H5 侧window.flutter_inappwebview.callHandler('openNative', {...})即可触发。

API 支持一览（节选）

[!TIP] ohos Support 为 yes 表示鸿蒙平台支持该能力，使用方式与 iOS / Android 保持一致。

仓库地址

• OpenHarmony 适配仓库：https://gitcode.com/CPF-Flutter/flutter_inappwebview
• 使用问题反馈：请到 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

本系列后续会陆续挑选高频库展开讲解，比如权限管理（permission_handler）、数据库（sqflite）、安全存储（flutter_secure_storage）、音频播放（just_audio）等。

如果你的 Flutter 应用正在计划适配鸿蒙，欢迎关注 CPF-Flutter 组织，也欢迎参与共建。