插件介绍

Flutter WebView Plugin 是一个功能强大的 Flutter 插件，用于在应用中集成 WebView 组件，支持加载网页、执行 JavaScript、处理网页事件等功能。该插件基于 flutter_webview_plugin@0.4.0 版本开发，并专门针对鸿蒙（HarmonyOS）系统进行了适配，确保在鸿蒙设备上能够稳定运行。

在鸿蒙系统上，该插件提供了与其他平台一致的 API 接口，方便开发者进行跨平台开发。主要功能包括：

• 加载远程网页和本地网页
• 支持 JavaScript 交互
• 网页导航控制（前进、后退、刷新等）
• 网页事件监听（加载进度、URL 变化、状态变化等）
• 自定义 WebView 配置（缩放、缓存、Cookie 等）
• 支持隐藏和显示 WebView
• 支持多种 WebView 展示方式（全屏、指定区域、组件方式）

安装与配置

1. 添加依赖

由于这是一个自定义修改版本，需要通过 Git 形式引入依赖。在项目的 pubspec.yaml 文件中添加以下配置：

dependencies:
  flutter_webview_plugin:
    git:
      url: https://gitcode.com/openharmony-sig/fluttertpc_flutter_webview_plugin

  flutter_webview_plugin_ohos:
    git:
      url: https://gitcode.com/openharmony-sig/fluttertpc_flutter_webview_plugin
      path: ohos

添加依赖后，执行以下命令获取包：

flutter pub get

2. 配置鸿蒙权限

在鸿蒙系统上使用 WebView 功能，需要配置网络权限。

2.1 添加网络权限

打开 entry/src/main/module.json5 文件，在 requestPermissions 数组中添加以下权限配置：

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET",
    "reason": "$string:network_reason",
    "usedScene": {
      "abilities": [
        "EntryAbility"
      ],
      "when":"inuse"
    }
  },
]

2.2 添加权限说明

打开 entry/src/main/resources/base/element/string.json 文件，添加权限申请原因：

{
  "string": [
    {
      "name": "network_reason",
      "value": "使用网络"
    },
  ]
}

API 调用示例

1. 基本使用

import 'package:flutter_webview_plugin_ohos/flutter_webview_plugin_ohos.dart';

// 创建 WebView 插件实例
final flutterWebViewPlugin = FlutterWebviewPlugin();

// 加载网页
flutterWebViewPlugin.launch('https://flutter.io');

// 关闭 WebView
flutterWebViewPlugin.close();

2. 自定义配置

// 加载网页并配置参数
flutterWebViewPlugin.launch(
  'https://flutter.io',
  // 设置 User Agent
  userAgent: 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36',
  // 启用 JavaScript
  withJavascript: true,
  // 清除缓存
  clearCache: true,
  // 清除 Cookie
  clearCookies: true,
  // 支持缩放
  withZoom: true,
  // 显示缩放控件
  displayZoomControls: true,
  // 支持本地存储
  withLocalStorage: true,
);

3. 指定区域显示

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

// 在指定区域显示 WebView
flutterWebViewPlugin.launch(
  'https://flutter.io',
  rect: Rect.fromLTWH(
      0.0, 0.0, MediaQuery.of(context).size.width, 300.0),
);

4. 使用组件方式

import 'package:flutter_webview_plugin_ohos/flutter_webview_plugin_ohos.dart';

// 使用 WebviewScaffold 组件
WebviewScaffold(
  url: 'https://flutter.io',
  appBar: AppBar(
    title: const Text('Widget WebView'),
  ),
  withZoom: true,
  withLocalStorage: true,
  hidden: true,
  initialChild: Container(
    color: Colors.redAccent,
    child: const Center(
      child: Text('Waiting.....'),
    ),
  ),
);

5. JavaScript 交互

// 定义 JavaScript 通道
final Set<JavascriptChannel> jsChannels = {
  JavascriptChannel(
      name: 'Print',
      onMessageReceived: (JavascriptMessage message) {
        print(message.message);
      }),
};

// 加载网页并配置 JavaScript 通道
flutterWebViewPlugin.launch(
  'https://flutter.io',
  javascriptChannels: jsChannels,
);

// 执行 JavaScript 代码
flutterWebViewPlugin.evalJavascript('window.navigator.userAgent').then((result) {
  print('User Agent: $result');
});

6. 网页导航控制

// 后退
flutterWebViewPlugin.goBack();

// 前进
flutterWebViewPlugin.goForward();

// 重新加载
flutterWebViewPlugin.reload();

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

7. 事件监听

// 监听 WebView 销毁
flutterWebViewPlugin.onDestroy.listen((_) {
  print('Webview Destroyed');
});

// 监听 URL 变化
flutterWebViewPlugin.onUrlChanged.listen((String url) {
  print('URL changed: $url');
});

// 监听加载进度
flutterWebViewPlugin.onProgressChanged.listen((double progress) {
  print('Loading progress: $progress%');
});

// 监听 WebView 状态变化
flutterWebViewPlugin.onStateChanged.listen((WebViewStateChanged state) {
  print('State changed: ${state.type} ${state.url}');
});

// 监听 HTTP 错误
flutterWebViewPlugin.onHttpError.listen((WebViewHttpError error) {
  print('HTTP error: ${error.code} ${error.url}');
});

高级功能

1. 隐藏和显示 WebView

// 隐藏 WebView
flutterWebViewPlugin.hide();

// 显示 WebView
flutterWebViewPlugin.show();

2. 清除缓存和 Cookie

// 清除缓存
flutterWebViewPlugin.clearCache();

// 清理 Cookie
flutterWebViewPlugin.cleanCookies();

// 获取 Cookie
flutterWebViewPlugin.getCookies().then((Map<String, String> cookies) {
  print('Cookies: $cookies');
});

3. 调整 WebView 大小

import 'dart:ui';

// 调整 WebView 大小
flutterWebViewPlugin.resize(Rect.fromLTWH(
    0.0, 0.0, MediaQuery.of(context).size.width, 500.0));

兼容性说明

该插件在以下鸿蒙环境中经过测试并正常工作：

• Flutter: 3.7.12-ohos-1.0.6
• SDK: 5.0.0(12)
• IDE: DevEco Studio: 5.0.13.200
• ROM: 5.1.0.120 SP3

总结

Flutter WebView Plugin 为鸿蒙系统提供了强大的 WebView 功能，具有以下特点：

1. 跨平台一致的 API：与其他平台使用相同的接口，方便开发者进行跨平台开发
2. 多种 WebView 展示方式：支持全屏、指定区域和组件方式展示 WebView
3. 丰富的配置选项：支持自定义 User Agent、缓存、Cookie、缩放等参数
4. 完整的网页控制：提供前进、后退、刷新、停止等网页导航功能
5. JavaScript 交互支持：可以与网页进行双向通信
6. 完善的事件监听：支持监听加载进度、URL 变化、状态变化等事件
7. 灵活的显示控制：支持隐藏、显示和调整 WebView 大小

通过本指南的介绍，开发者可以快速上手使用 Flutter WebView Plugin 在鸿蒙系统上实现 WebView 功能，为应用添加网页浏览和交互能力。

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