Flutter跨平台开发鸿蒙化WebView集成使用指南

Flutter-OpenHarmony WebView集成方案为开发者提供了在鸿蒙平台上嵌入Web内容的能力。该方案支持本地HTML加载、JavaScript双向通信、导航控制和路由管理等功能。开发环境要求Flutter SDK≥3.7.0和OpenHarmony API≥9，通过AtomGit引入webview_flutter依赖即可使用。示例展示了WebView初始化、本地资源加载、JS通信等

l13406208235

728人浏览 · 2025-12-24 13:43:46

l13406208235 · 2025-12-24 13:43:46 发布

一、插件介绍

Flutter-OpenHarmony WebView集成方案是一个专为开源鸿蒙平台打造的WebView组件适配方案，它允许开发者在Flutter应用中无缝集成WebView组件，实现Web内容与原生Flutter界面的高效交互。该方案支持：

本地HTML资源加载
JavaScript与Flutter双向通信
WebView导航控制（前进、后退、刷新等）
页面生命周期管理
跨平台页面跳转协调

该方案特别适合需要在OpenHarmony应用中嵌入Web内容的场景，如混合开发、内容展示、第三方服务集成等。

在这里插入图片描述

二、环境搭建

2.1 开发环境要求

Flutter SDK: ≥ 3.7.0
Dart SDK: ≥ 2.19.6
OpenHarmony SDK: API ≥ 9
DevEco Studio: ≥ 3.0

2.2 项目创建

使用Flutter命令创建新的Flutter项目：

flutter create --platforms=ohos flutter_webview_demo

cd flutter_webview_demo

三、依赖配置

由于该WebView组件是针对OpenHarmony平台的自定义修改版本，需要通过AtomGit进行引入。在项目的pubspec.yaml文件中添加以下依赖配置：

dependencies:
  flutter:
    sdk: flutter
  
  # WebView组件依赖
  webview_flutter:
    git:
      url: "https://atomgit.com/openharmony-tpc/flutter_packages.git"
      path: "packages/webview_flutter/webview_flutter"
  
  # 路由管理依赖
  go_router:
    git:
      url: "https://atomgit.com/openharmony-tpc/flutter_packages.git"
      path: "packages/go_router"
  
  # 其他必要依赖
  cupertino_icons: ^1.0.2

添加完依赖后，执行以下命令安装：

flutter pub get

四、API调用与代码示例

4.1 WebView组件初始化

在Flutter页面中，我们可以通过WebViewController来初始化和控制WebView组件：

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

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

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();

    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      // 加载本地HTML资源
      ..loadFlutterAsset('assets/index.html')
      // 添加JavaScript通信通道
      ..addJavaScriptChannel("flutter_method_channel",
          onMessageReceived: (JavaScriptMessage message) {
            // 处理来自JavaScript的消息
            Navigator.of(context).push(MaterialPageRoute(
                builder: (context) => OtherFlutterPage(title: 'Flutter Page')));
          });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Web Page')),
      body: WebViewWidget(controller: controller),
    );
  }
}

4.2 本地HTML资源加载

首先，在项目根目录创建assets文件夹，并添加index.html文件：

<!DOCTYPE html>
<html>
<head>
    <title>H5 Page</title>
</head>
<body>
<button style="font-size: 32px;" onclick="navigateToFlutter()">点击跳转到Flutter页面</button>
<script type="text/javascript">
    function navigateToFlutter() {
        // 调用Flutter方法
        flutter_method_channel.postMessage("message_from_web");
    }
</script>
<p style="font-size: 66px;">这是一个Web页面</p>
</body>
</html>

然后在pubspec.yaml文件中配置资源路径：

flutter:
  uses-material-design: true
  assets:
    - assets/index.html

4.3 JavaScript与Flutter通信

在WebView中，我们可以通过JavaScriptChannel实现JavaScript与Flutter的双向通信：

Flutter向JavaScript发送消息：

// 调用JavaScript函数
controller.runJavaScript('alert("Hello from Flutter!");');

JavaScript向Flutter发送消息：

// 在HTML中调用Flutter方法
flutter_method_channel.postMessage("message_content");

4.4 导航控制

WebViewController提供了丰富的导航控制方法：

// 前进
controller.goForward();

// 后退
controller.goBack();

// 刷新
controller.reload();

// 加载指定URL
controller.loadRequest(Uri.parse('https://www.example.com'));

// 停止加载
controller.stopLoading();

4.5 路由配置

使用go_router配置应用路由：

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:webview_flutter/webview_flutter.dart';

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

var router = GoRouter(
  initialLocation: '/',
  navigatorKey: navigatorKey,
  routes: [
    GoRoute(
      name: 'home',
      path: '/',
      builder: (context, state) => const MyHomePage(title: 'WebView Demo'),
    ),
    GoRoute(
        name: 'web',
        path: "/web",
        builder: (BuildContext context, GoRouterState state) {
          return const WebViewPage();
        }
    ),
  ],
);

五、完整示例应用

5.1 主页面实现

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            GestureDetector(
              onTap: () {
                // 导航到WebView页面
                context.push("/web");
              },
              child: const Text(
                '点击启动本地H5',
                style: TextStyle(fontSize: 24),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

5.2 WebView页面实现

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

import 'OtherFlutterPage.dart';

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

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();

    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..loadFlutterAsset('assets/index.html')
      ..addJavaScriptChannel("flutter_method_channel",
          onMessageReceived: (JavaScriptMessage message) {
            // 当接收到方法调用时，跳转到Flutter页面
            Navigator.of(context).push(MaterialPageRoute(
                builder: (context) => const OtherFlutterPage(title: 'Flutter Page')));
          });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Web Page')),
      body: WebViewWidget(controller: controller),
    );
  }
}

5.3 跳转目标页面实现

import 'package:flutter/material.dart';

class OtherFlutterPage extends StatefulWidget {
  const OtherFlutterPage({super.key, required this.title});

  final String title;

  @override
  State<OtherFlutterPage> createState() => _OtherFlutterState();
}

class _OtherFlutterState extends State<OtherFlutterPage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

六、OpenHarmony原生集成

6.1 鸿蒙原生页面配置

在OpenHarmony项目的Index.ets页面中，使用FlutterPage组件加载Flutter应用：

import { FlutterPage } from '@ohos/flutter';

@Entry
@Component
struct Index {
  build() {
    Column() {
      FlutterPage()
        .width('100%')
        .height('100%')
    }
    .width('100%')
    .height('100%')
  }
}

6.2 应用构建与运行

使用DevEco Studio打开项目的OpenHarmony模块
连接OpenHarmony设备或模拟器
点击运行按钮构建并运行应用

七、总结

Flutter-OpenHarmony WebView集成方案为开发者提供了在OpenHarmony平台上无缝使用WebView组件的能力。通过该方案，开发者可以：

轻松加载本地HTML资源和远程网页
实现JavaScript与Flutter的双向通信
灵活控制WebView的导航和生命周期
实现Web页面与Flutter页面的无缝跳转
享受跨平台开发的便利，同时充分利用OpenHarmony平台特性

该方案的优势在于其简洁的API设计、强大的功能支持和良好的性能表现，是开发混合式应用的理想选择。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

腾讯云开发者社区

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git