Flutter 鸿蒙化实战：flutter_inappwebview 适配 OpenHarmony，最强 WebView 一行接入

m0_73818582

48人浏览 · 2026-09-30 10:04:54

m0_73818582 · 2026-09-30 10:04:54 发布

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、内嵌文档/富文本等。

适配情况

Flutter 框架版本	TAG 名称	分支名
3.22	6.1.5-ohos-1.0.0	br_v6.1.5_ohos
3.27	6.1.5-ohos-1.0.0	br_v6.1.5_ohos
3.35	6.1.5-ohos-1.0.0	br_v6.1.5_ohos
已验证环境（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。

[!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 框架版本，从上方映射表选择对应 TAG
      ref: 6.1.5-ohos-1.0.0

执行：

flutter pub get

使用示例

内嵌网页 + JS 调用

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class WebPage extends StatefulWidget {
  const WebPage({super.key});

  @override
  State<WebPage> createState() => _WebPageState();
}

class _WebPageState extends State<WebPage> {
  InAppWebViewController? _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('WebView'),
        actions: [
          IconButton(
            onPressed: () async {
              final title = await _controller?.getTitle();
              // 调用页面里的 JS
              await _controller?.evaluateJavascript(source: 'window.hi && window.hi()');
              ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('标题：$title')));
            },
            icon: const Icon(Icons.refresh),
          ),
        ],
      ),
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: WebUri('https://example.com')),
        onWebViewCreated: (controller) => _controller = controller,
        onLoadStop: (controller, url) { /* 加载完成 */ },
        shouldOverrideUrlLoading: (controller, action) {
          // 拦截指定跳转，如跳转原生
          return NavigationActionPolicy.CANCEL;
        },
      ),
    );
  }
}

H5 调用原生

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

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

API 支持一览（节选）

API	说明	ohos 支持
InAppWebView	内嵌网页组件	yes
InAppWebViewController	网页视图控制器	yes
evaluateJavascript	调用 JS	yes
addJavaScriptHandler	注册 JS→Dart 回调	yes
loadUrl / reload / goBack	加载与导航	yes
shouldOverrideUrlLoading	拦截 URL 加载	yes