在鴻蒙上使用webview_flutter包的詳細示例

更新時間：2026年02月07日 11:05:44 作者：進擊的前棧

webview_flutter是Flutter官方推出的一款用于Flutter上的webview插件,下面這篇文章主要介紹了在鴻蒙上使用webview_flutter包的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1. 插件介紹

webview_flutter 是一個功能強大的 Flutter 插件，提供了 WebView 小部件，允許開發(fā)者在 Flutter 應(yīng)用中嵌入網(wǎng)頁內(nèi)容。該插件支持多種平臺，包括 iOS、Android、Web 和鴻蒙（API 12+）。

核心功能

在 Flutter 應(yīng)用中無縫嵌入網(wǎng)頁內(nèi)容
支持網(wǎng)絡(luò)資源、本地文件和 Flutter 資源加載
提供完整的網(wǎng)頁導(dǎo)航控制（前進、后退、刷新）
支持 JavaScript 執(zhí)行和雙向通信
提供網(wǎng)頁加載進度監(jiān)聽和導(dǎo)航?jīng)Q策控制
支持自定義用戶代理、背景顏色和縮放控制

鴻蒙平臺支持

在鴻蒙平臺上，webview_flutter 插件基于鴻蒙的 WebView API（API 12+）實現(xiàn)，提供與其他平臺一致的功能體驗。支持鴻蒙 API 12 及以上版本。

2. 依賴引入

由于這是一個針對鴻蒙平臺的自定義修改版本，需要通過 git 形式引入依賴。

配置步驟

在項目的 pubspec.yaml 文件中，添加以下依賴配置：

dependencies:
  webview_flutter:
    git:
      url: "https://gitcode.com/openharmony-tpc/flutter_packages.git"
      path: "packages/webview_flutter"

執(zhí)行以下命令獲取依賴：

flutter pub get

3. 鴻蒙平臺特殊配置

3.1 權(quán)限配置

添加網(wǎng)絡(luò)權(quán)限：在 entry/src/main/module.json5 文件中添加網(wǎng)絡(luò)權(quán)限聲明：

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

添加權(quán)限描述：在 entry/src/main/resources/base/element/string.json 文件中添加權(quán)限描述：

{
  "string": [
    {
      "name": "network_reason",
      "value": "使用網(wǎng)絡(luò)訪問網(wǎng)頁內(nèi)容"
    }
  ]
}

3.2 應(yīng)用級別配置

由于 WebView 可能需要系統(tǒng)級權(quán)限，需要將應(yīng)用級別設(shè)置為 system_basic，否則在安裝 HAP 包時可能會報錯。具體配置方法請參考華為官方文檔。

4. API 調(diào)用與使用示例

4.1 創(chuàng)建 WebViewController

WebViewController 是控制 WebView 行為的核心類，用于加載內(nèi)容、控制導(dǎo)航和執(zhí)行 JavaScript 等操作。

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

class WebViewExample extends StatefulWidget {
  const WebViewExample({Key? key}) : super(key: key);

  @override
  State<WebViewExample> createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    
    // 創(chuàng)建 WebViewController
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted) // 啟用 JavaScript
      ..setBackgroundColor(const Color(0x00000000)) // 設(shè)置透明背景
      ..setNavigationDelegate( // 設(shè)置導(dǎo)航委托
        NavigationDelegate(
          onProgress: (int progress) {
            // 更新加載進度
            debugPrint('WebView is loading (progress : $progress%)');
          },
          onPageStarted: (String url) {
            debugPrint('Page started loading: $url');
          },
          onPageFinished: (String url) {
            debugPrint('Page finished loading: $url');
          },
          onWebResourceError: (WebResourceError error) {
            debugPrint('\n\n====\nError: $error\n====\n\n');
          },
          onNavigationRequest: (NavigationRequest request) {
            // 控制導(dǎo)航?jīng)Q策
            if (request.url.startsWith('https://www.youtube.com/')) {
              debugPrint('blocking navigation to ${request.url}');
              return NavigationDecision.prevent;
            }
            debugPrint('allowing navigation to ${request.url}');
            return NavigationDecision.navigate;
          },
        ),
      )
      ..loadRequest(Uri.parse('https://flutter.dev')); // 加載初始 URL
  }

  // ...
}

4.2 創(chuàng)建 WebViewWidget

WebViewWidget 用于在 Flutter 界面中顯示 WebView 內(nèi)容，需要傳入之前創(chuàng)建的 WebViewController。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Flutter WebView 示例'),
      // 添加導(dǎo)航控制按鈕
      actions: [
        NavigationControls(_controller),
      ],
    ),
    body: WebViewWidget(controller: _controller), // 顯示 WebView
  );
}

4.3 實現(xiàn)導(dǎo)航控制

class NavigationControls extends StatelessWidget {
  const NavigationControls(this._webViewController, {Key? key}) : super(key: key);

  final WebViewController _webViewController;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        IconButton(
          icon: const Icon(Icons.arrow_back_ios),
          onPressed: () async {
            if (await _webViewController.canGoBack()) {
              await _webViewController.goBack();
            } else {
              if (context.mounted) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('No back history item')),
                );
              }
            }
          },
        ),
        IconButton(
          icon: const Icon(Icons.arrow_forward_ios),
          onPressed: () async {
            if (await _webViewController.canGoForward()) {
              await _webViewController.goForward();
            } else {
              if (context.mounted) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('No forward history item')),
                );
              }
            }
          },
        ),
        IconButton(
          icon: const Icon(Icons.replay),
          onPressed: () => _webViewController.reload(),
        ),
      ],
    );
  }
}

4.4 執(zhí)行 JavaScript

// 執(zhí)行 JavaScript 代碼
_controller.runJavaScript('alert("Hello from Flutter!");');

// 執(zhí)行 JavaScript 代碼并獲取返回結(jié)果
final result = await _controller.runJavaScriptReturningResult(
  'document.body.innerText.length'
);
debugPrint('Body text length: $result');

4.5 監(jiān)聽 JavaScript 消息

// 添加 JavaScript 通道
_controller.addJavaScriptChannel(
  'Toaster',
  onMessageReceived: (JavaScriptMessage message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(message.message)),
    );
  },
);

// 在網(wǎng)頁中發(fā)送消息到 Flutter
// window.Toaster.postMessage('Hello from JavaScript!');

4.6 加載不同類型的內(nèi)容

// 加載網(wǎng)絡(luò)資源
_controller.loadRequest(Uri.parse('https://flutter.dev'));

// 加載本地文件
_controller.loadFile('/path/to/local/file.html');

// 加載 Flutter 資源
_controller.loadFlutterAsset('assets/html/index.html');

// 加載 HTML 字符串
_controller.loadHtmlString('''
<html>
<body>
  <h1>Hello, World!</h1>
  <p>This is HTML content loaded from a string.</p>
</body>
</html>
''', baseUrl: Uri.parse('https://example.com'));

5. 注意事項

5.1 權(quán)限配置

確保正確配置網(wǎng)絡(luò)權(quán)限，否則 WebView 將無法加載網(wǎng)絡(luò)資源。同時，注意應(yīng)用級別的設(shè)置，避免安裝時出現(xiàn)權(quán)限錯誤。

5.2 鴻蒙平臺兼容性

支持鴻蒙 API 12 及以上版本
要求 Flutter 版本：3.7.12-ohos-1.1.1 及以上
要求鴻蒙 SDK 版本：5.0.0(12) 及以上

5.3 性能優(yōu)化

避免在 WebView 中加載過于復(fù)雜的網(wǎng)頁內(nèi)容
合理使用 JavaScript 通道，避免頻繁的雙向通信
在不需要時及時釋放 WebView 資源

5.4 安全性考慮

謹慎處理來自網(wǎng)頁的 JavaScript 消息
對加載的網(wǎng)頁內(nèi)容進行適當(dāng)?shù)陌踩炞C
考慮使用內(nèi)容安全策略 (CSP) 保護應(yīng)用

6. 總結(jié)

webview_flutter 是一個功能強大的 Flutter 插件，為開發(fā)者提供了在 Flutter 應(yīng)用中嵌入網(wǎng)頁內(nèi)容的能力。在鴻蒙平臺上，該插件提供了與其他平臺一致的功能體驗，支持網(wǎng)絡(luò)資源加載、JavaScript 執(zhí)行、導(dǎo)航控制等核心功能。

使用該插件的關(guān)鍵步驟包括：