Flutter笔记：关于WebView插件的用法（上）

jcLee952024-06-13 11:12

Flutter笔记 关于WebView插件的用法（上）

【介绍】：WebView是一个可以在移动应用中显示网页的组件。它基于原生的WebView控件(如iOS中的WKWebView和Android中的WebView)，提供了加载URL、显示HTML内容、与JavaScript交互等功能。通过在Flutter应用中使用WebView，我们可以方便地集成Web内容，并与之进行交互。本文介绍Flutter中WebView插件的用法。

下一节：《 关于WebView插件的用法（下） 》

目 录

  • [1. 概述与用法入门](#1. 概述与用法入门)
    • [1.1 Flutter WebView简介](#1.1 Flutter WebView简介)
    • [1.2 webview_flutter库的安装](#1.2 webview_flutter库的安装)
    • [1.3 WebViewController的创建和生命周期](#1.3 WebViewController的创建和生命周期)
    • [1.4 设置WebView属性](#1.4 设置WebView属性)
      • [1.4.1 JavaScript执行模式](#1.4.1 JavaScript执行模式)
      • [1.4.2 背景颜色](#1.4.2 背景颜色)
      • [1.4.3 用户代理](#1.4.3 用户代理)
      • [1.2.4 导航代理](#1.2.4 导航代理)
    • [1.5 加载网页](#1.5 加载网页)
    • [1.6 显示WebView组件](#1.6 显示WebView组件)
  • [2. 导航控制](#2. 导航控制)
    • [2.1 页面跳转](#2.1 页面跳转)
    • [2.2 页面前进后退](#2.2 页面前进后退)
    • [2.3 页面重载](#2.3 页面重载)
    • [2.4 导航请求拦截](#2.4 导航请求拦截)
  • [3. JavaScript交互](#3. JavaScript交互)
    • [3.1 设置JavaScript执行模式](#3.1 设置JavaScript执行模式)
    • [3.2 调用JavaScript方法](#3.2 调用JavaScript方法)
    • [3.3 处理JavaScript消息](#3.3 处理JavaScript消息)
  • [4. 页面加载事件](#4. 页面加载事件)
    • [4.1 开始加载](#4.1 开始加载)
    • [4.2 加载进度](#4.2 加载进度)
    • [4.3 加载完成](#4.3 加载完成)
    • [4.4 加载错误处理](#4.4 加载错误处理)
  • [5. Cookie管理](#5. Cookie管理)
    • [5.1 设置Cookie](#5.1 设置Cookie)
    • [5.2 获取Cookie](#5.2 获取Cookie)
    • [5.3 清除Cookie](#5.3 清除Cookie)
  • [6. 缓存管理](#6. 缓存管理)
    • [6.1 添加缓存](#6.1 添加缓存)
    • [6.2 查看缓存](#6.2 查看缓存)
    • [6.3 清除缓存](#6.3 清除缓存)
  • [7. 加载本地内容](#7. 加载本地内容)
    • [7.1 加载本地HTML文件](#7.1 加载本地HTML文件)
    • [7.2 加载Flutter资源](#7.2 加载Flutter资源)
    • [7.3 加载HTML字符串](#7.3 加载HTML字符串)

[1. 概述与用法入门](#1. 概述与用法入门)

[1.1 Flutter WebView简介](#1.1 Flutter WebView简介)

在Flutter 应用中，我们经常需要展示网页内容或者与Web进行交互。WebView 插件提供了在Flutter应用中嵌入和控制Web内容的能力。WebView 是一个可以在移动应用中显示网页的组件。它基于原生的WebView 控件(如iOS 中的WKWebView 和Android 中的WebView )，提供了加载URL 、显示HTML 内容、与JavaScript 交互等功能。通过在Flutter应用中使用WebView ，我们可以方便地集成Web内容，并与之进行交互。

要在Flutter 应用中使用WebView 组件，首先需要创建一个WebViewController 实例来管理WebView 的各种行为和属性。然后将WebViewController 对象传递给WebViewWidget 以在界面上显示WebView内容。

Flutter 的WebView 插件(webview_flutter)是官方提供的一个用于在Flutter 应用中嵌入WebView 的插件。它封装了原生的WebView 控件，并提供了一套统一的Dart API ，使得在Flutter 中使用WebView变得简单和高效。

[1.2 webview_flutter库的安装](#1.2 webview_flutter库的安装)

要在Flutter项目中使用WebView插件，首先需要在pubspec.yaml文件中添加webview_flutter库的依赖。打开pubspec.yaml文件，在dependencies部分添加如下内容：

yml 复制代码 
dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.8.0

这里我们指定了webview_flutter库的版本号为4.8.0，这是目前最新的稳定版本。你可以根据需要选择适合你项目的版本。添加完依赖后，获取库文件：

bash 复制代码 
flutter pub get

这会下载webview_flutter库及其相关的依赖项，并将其添加到项目中。

如果你希望直接使用最新版本添加到项目中，也可以：

bash 复制代码 
flutter pub add webview_flutter

对于Android平台，webview_flutter库需要Android SDK版本19或更高版本的支持，还需要在android/app/build.gradle文件中将最低SDK版本设置为19或更高：

gradle 复制代码 
android {
    defaultConfig {
        // ...
        minSdkVersion 19
    }
}

另外，在安卓平台使用WebView加载网页时，多数情况下都需要用到网络，需要确保你的应用有访问网络的权限。对于Android平台，需要在AndroidManifest.xml文件中添加以下权限：

xml 复制代码 
<uses-permission android:name="android.permission.INTERNET" />

对于iOS平台，需要在ios/Runner/Info.plist文件中添加以下键值对，以允许WebView加载HTTP内容:

klist 复制代码 
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

这个配置允许WebView 在iOS 9 及更高版本中加载任意的HTTP 内容。如果你的应用只需要加载HTTPS内容，可以忽略这个配置。

[1.3 WebViewController的创建和生命周期](#1.3 WebViewController的创建和生命周期)

在使用WebView 之前，需要先创建一个WebViewController 对象。可以直接通过WebViewController的构造函数来创建实例：

dart 复制代码 
final WebViewController controller = WebViewController();

这将创建一个默认配置的WebViewController实例。

你也可以在创建时直接设置一些初始参数，例如:

dart 复制代码 
final WebViewController controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setBackgroundColor(const Color(0x00000000))
  ..setNavigationDelegate(
    NavigationDelegate(
      onProgress: (int progress) {
        // 页面加载进度变化时会调用
      },
      onPageStarted: (String url) {
        // 页面开始加载时调用
      },
      onPageFinished: (String url) {
        // 页面加载完成时调用
      },
      onWebResourceError: (WebResourceError error) {
        // 页面加载出错时调用
      },
    ),
  )
  ..loadRequest(Uri.parse('https://flutter.dev'));

以上代码创建了一个WebViewController，并设置了JavaScript 执行模式、背景颜色、导航代理以及初始加载的URL。

[1.4 设置WebView属性](#1.4 设置WebView属性)

创建完WebViewController实例后，可以根据需要设置WebView的各种属性，例如:

[1.4.1 JavaScript执行模式](#1.4.1 JavaScript执行模式)

dart 复制代码 
controller.setJavaScriptMode(JavaScriptMode.unrestricted);

通过setJavaScriptMode方法可以设置页面中JavaScript的执行模式，可选值包括:

  • JavaScriptMode.disabled: 不允许执行JavaScript。

  • JavaScriptMode.unrestricted: 允许执行JavaScript，不做任何限制。

[1.4.2 背景颜色](#1.4.2 背景颜色)

dart 复制代码 
controller.setBackgroundColor(const Color(0x00000000));

使用setBackgroundColor方法可以为WebView设置背景颜色。上面的代码将背景色设为透明。

[1.4.3 用户代理](#1.4.3 用户代理)

用户代理的概念

用户代理(User Agent)是一个字符串，用于标识浏览器或客户端的身份和版本信息。它是HTTP请求头中的一个字段，服务器可以通过解析用户代理字符串来了解发起请求的客户端的相关信息。

用户代理字符串通常包含以下几个部分：

  1. 浏览器或客户端的名称和版本号，如**"Mozilla/5.0"、"Chrome/93.0.4577.82"**等。
  2. 操作系统的名称和版本号，如"Windows NT 10.0"、"Android 11"等。
  3. 渲染引擎的名称和版本号，如**"AppleWebKit/537.36"、"Gecko/20100101"**等。
  4. 其他一些标识信息，如设备型号、语言等。

下面是一个典型的用户代理字符串的示例：

复制代码 
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36

这个用户代理字符串表示：

  • 浏览器名称和版本号：Chrome/93.0.4577.82

  • 操作系统：Windows NT 10.0 (64位)

  • 渲染引擎：AppleWebKit/537.36 (兼容KHTML和Gecko)

  • 其他标识：Safari/537.36 (表示兼容Safari浏览器)

服务器可以根据用户代理字符串来判断客户端的类型和版本，从而提供不同的内容或功能。例如，某些网站可能会根据用户代理判断是桌面 浏览器还是移动 浏览器，从而返回不同的页面布局。

在WebView 中，默认使用系统提供的用户代理字符串，表示当前WebView所在的平台和版本信息。但有时我们可能需要自定义用户代理字符串，以模拟特定的浏览器或客户端，或者向服务器传递额外的信息。

通过自定义用户代理字符串，可以改变WebView 在发送HTTP请求时所携带的用户代理信息，从而影响服务器的响应和行为。这在某些特定场景下可能会很有用，如兼容性测试、数据爬取等。

设置用户代理
dart 复制代码 
controller.setUserAgent('Custom UA String');

通过setUserAgent方法可以自定义WebView的用户代理字符串。

[1.2.4 导航代理](#1.2.4 导航代理)

dart 复制代码 
controller.setNavigationDelegate(NavigationDelegate(
  onProgress: (int progress) {
    // 页面加载进度变化时会调用
  },
  onPageStarted: (String url) {
    // 页面开始加载时调用
  },
  onPageFinished: (String url) {
    // 页面加载完成时调用
  },
  onWebResourceError: (WebResourceError error) {
    // 页面加载出错时调用
  },
));

通过setNavigationDelegate方法可以设置一个NavigationDelegate对象，它可以监听页面加载过程中的各种事件，包括:

  • onProgress: 页面加载进度变化时调用。

  • onPageStarted: 页面开始加载时调用。

  • onPageFinished: 页面加载完成时调用。

  • onWebResourceError: 页面加载出错时调用。

除了上述常用的属性外，WebViewController还提供了其他一些方法来控制WebView的行为，如:

  • clearCache: 清除WebView的缓存数据。

  • clearLocalStorage: 清除WebView的本地存储数据。

  • goBack: 后退到上一页。

  • goForward: 前进到下一页。

  • reload: 重新加载当前页面。

  • runJavaScript: 在页面中执行JavaScript代码。

  • runJavaScriptReturningResult: 在页面中执行JavaScript代码，并获取返回值。

  • addJavaScriptChannel: 注册JavaScript通道，以便页面可以向Flutter发送消息。

你可以根据实际需求，调用这些方法来控制WebView的行为和功能。

通过设置WebViewController的各种属性和方法，你可以对WebView 的表现进行灵活的控制和定制。在后续的小节中，我们还会详细介绍更多的WebView使用技巧和场景。

[1.5 加载网页](#1.5 加载网页)

在创建并配置好WebViewController后，可以使用其loadRequest方法来加载指定URL的网页。例如:

dart 复制代码 
final WebViewController controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setBackgroundColor(const Color(0x00000000))
  ..setNavigationDelegate(NavigationDelegate(
    // ...
  ))
  ..loadRequest(Uri.parse('https://flutter.dev'));

上面的代码在创建WebViewController实例后，通过级联操作符(..)直接调用了loadRequest方法，传入了要加载的URL。

loadRequest方法接受一个Uri对象作为参数，表示要加载的网页URL。你可以使用Uri.parse方法将URL字符串解析为Uri对象。

除了直接传入URL外，loadRequest方法还支持其他一些可选参数:

  • method: HTTP请求方法，默认为LoadRequestMethod.get，表示使用GET方法请求。你可以传入LoadRequestMethod.post来发送POST请求。

  • headers: HTTP请求头，默认为空。你可以传入一个Map<String, String>对象来设置自定义的请求头。

  • body: 请求体数据，默认为null。对于POST请求，你可以传入一个Uint8List对象作为请求体。

例如，发送一个POST请求并设置自定义请求头:

dart 复制代码 
controller.loadRequest(
  Uri.parse('https://example.com/api/endpoint'),
  method: LoadRequestMethod.post,
  headers: <String, String>{'Content-Type': 'application/json'},
  body: Uint8List.fromList('{"key": "value"}'.codeUnits),
);

通过使用loadRequest方法，你可以灵活地加载各种URL的网页，并根据需要设置请求方法、请求头和请求体等参数。

[1.6 显示WebView组件](#1.6 显示WebView组件)

在Flutter页面中显示WebView内容非常简单，只需要将之前创建的WebViewController实例传递给WebViewWidget即可。

dart 复制代码 
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('WebView示例'),
    ),
    body: WebViewWidget(
      controller: controller,
    ),
  );
}

上面的代码在Scaffold的body属性中使用了WebViewWidget，并将之前创建的WebViewController实例controller传递给了它的controller参数。

这样，WebView 的内容就会显示在页面的主体部分。你可以根据需要调整WebViewWidget的位置和大小，例如可以将其放在Column、Row或Stack等布局组件中。

需要注意的是，WebViewWidget的父组件必须提供一个非空的BuildContext，因此通常将其放在StatefulWidget的build方法中。

另外，如果要在WebView中显示的内容需要访问网络，别忘了在应用的AndroidManifest.xml文件中添加网络权限:

xml 复制代码 
<uses-permission android:name="android.permission.INTERNET"/>

对于iOS，默认就已经包含了网络访问权限，无需额外配置。

通过将WebViewController 传递给WebViewWidget，并将其放置在页面的合适位置，你就可以在Flutter 应用中方便地显示WebView内容了。

以上就是WebView的基本用法，包括创建WebViewController 、设置WebView 属性、加载网页以及在页面中显示WebView 组件。掌握了这些基础知识后，你就可以开始在Flutter应用中集成和使用WebView功能了。

在后续的小节中，我们还会介绍更多WebView 的进阶用法和技巧，如导航控制、JavaScript交互、页面加载事件处理等。

[2. 导航控制](#2. 导航控制)

WebView 提供了一些方法来控制页面的导航，包括跳转到新的URL、前进、后退等操作。下面我们来详细介绍这些导航控制的用法。

[2.1 页面跳转](#2.1 页面跳转)

在WebView 中，可以使用WebViewController 的loadRequest方法来跳转到新的URL。该方法接受一个Uri对象作为参数，表示要加载的目标URL。

例如，要跳转到Flutter 官网，可以这样调用loadRequest方法:

dart 复制代码 
controller.loadRequest(Uri.parse('https://flutter.dev'));

除了直接传入URL字符串外，loadRequest方法还支持其他一些可选参数:

  • method: HTTP请求方法，默认为 LoadRequestMethod.get ，表示使用 GET 方法请求。你可以传入LoadRequestMethod.post 来发送 POST请求。

  • headers: HTTP请求头，默认为空。你可以传入一个**Map<String, String>**对象来设置自定义的请求头。

  • body: 请求体数据，默认为null。对于 POST 请求，你可以传入一个 Uint8List 对象作为请求体。

例如，发送一个 POST 请求并设置自定义请求头:

dart 复制代码 
controller.loadRequest(
  Uri.parse('https://example.com/api/endpoint'),
  method: LoadRequestMethod.post,
  headers: <String, String>{'Content-Type': 'application/json'},
  body: Uint8List.fromList('{"key": "value"}'.codeUnits),
);

通过使用loadRequest方法，你可以灵活地加载各种URL的网页，并根据需要设置请求方法、请求头和请求体等参数。

[2.2 页面前进后退](#2.2 页面前进后退)

WebView 维护了一个页面历史栈，可以通过调用WebViewController 的goBack和goForward方法来实现页面的前进和后退操作。

  • goBack：后退到上一页，相当于浏览器的后退按钮；
  • goForward：前进到下一页，相当于浏览器的前进按钮。

例如，在WebView中后退到上一页:

dart 复制代码 
controller.goBack();

在WebView中前进到下一页:

dart 复制代码 
controller.goForward();

你可以根据需要在合适的时机调用这些方法，例如在用户点击后退或前进按钮时执行相应的操作。此外，WebViewController还提供了一些与导航历史相关的方法：

  • canGoBack：返回一个Future<bool>，表示当前是否可以执行后退操作。
  • canGoForward：返回一个Future<bool>，表示当前是否可以执行前进操作。
  • currentUrl：返回一个Future<String> ，表示当前页面的URL。

你可以使用这些方法来检查导航历史的状态，并根据需要更新界面上的导航按钮等元素。例如：

dart 复制代码 
// 检查是否可以后退
controller.canGoBack().then((bool canGoBack) {
  if (canGoBack) {
    // 更新后退按钮的状态,使其可用
  } else {
    // 更新后退按钮的状态,使其不可用
  }
});
// 获取当前页面的URL
controller.currentUrl().then((String url) {
  // 更新界面上显示的URL
});

通过合理使用WebViewController提供的导航控制方法，你可以实现类似浏览器的前进、后退等功能,提供更好的用户体验。

[2.3 页面重载](#2.3 页面重载)

在WebView 中，可以通过调用WebViewController 的reload方法来重新加载当前页面。这个操作相当于浏览器中的刷新按钮，会重新请求并加载当前页面的内容。

示例代码:

dart 复制代码 
// 重新加载当前页面
controller.reload();

你可以在需要的时候调用reload方法，例如在用户点击刷新按钮时执行重新加载操作:

dart 复制代码 
FloatingActionButton(
  onPressed: () {
    // 重新加载当前页面
    controller.reload();
  },
  child: const Icon(Icons.refresh),
),

通过调用reload方法，WebView会重新发起请求，获取并加载当前页面的最新内容。这对于需要更新页面数据或者重试加载失败的页面非常有用。

[2.4 导航请求拦截](#2.4 导航请求拦截)

WebView 在加载新页面时，会触发导航请求。通过设置WebViewController 的navigationDelegate属性，可以拦截并处理这些导航请求，决定是否允许页面跳转。例如：

dart 复制代码 
controller.setNavigationDelegate(NavigationDelegate(
  // 导航请求回调
  onNavigationRequest: (NavigationRequest request) {
    // 判断请求的URL是否符合条件
    if (request.url.startsWith('https://example.com/')) {
      // 允许跳转到指定域名的页面
      return NavigationDecision.navigate;
    } else {
      // 阻止跳转到其他域名的页面
      return NavigationDecision.prevent;
    }
  },
));

在上面的代码中，通过setNavigationDelegate方法设置了一个NavigationDelegate 对象，并实现了onNavigationRequest回调。

当WebView 触发导航请求时，onNavigationRequest回调会被调用，并传入一个NavigationRequest 对象，其中包含了请求的URL等信息。

在回调中，你可以根据请求的URL 进行判断，决定是否允许页面跳转。返回NavigationDecision.navigate 表示允许跳转，返回NavigationDecision.prevent表示阻止跳转。

通过导航请求拦截，你可以实现一些自定义的导航控制逻辑，例如:

  • 限制只允许跳转到特定域名或路径的页面。

  • 在跳转到外部链接时，提示用户确认是否离开当前页面。

  • 对于某些URL ，可以直接在Flutter 中处理，而不是在WebView中加载。

  • 记录或统计页面跳转的情况，用于分析用户行为。

除了onNavigationRequest回调外，NavigationDelegate还提供了其他一些回调方法:

  • onPageStarted: 页面开始加载时触发。

  • onPageFinished: 页面加载完成时触发。

  • onProgress: 页面加载进度变化时触发。

  • onWebResourceError: 页面加载过程中发生错误时触发。

你可以根据需要实现这些回调，以便在页面加载的不同阶段执行相应的操作。

例如:

dart 复制代码 
controller.setNavigationDelegate(NavigationDelegate(
  // 页面开始加载
  onPageStarted: (String url) {
    print('页面开始加载: $url');
  },
  // 页面加载完成
  onPageFinished: (String url) {
    print('页面加载完成: $url');
  },
  // 页面加载进度变化
  onProgress: (int progress) {
    print('页面加载进度: $progress%');
  },
  // 页面加载错误
  onWebResourceError: (WebResourceError error) {
    print('页面加载错误: ${error.description}');
  },
));

通过实现NavigationDelegate 的回调方法，你可以更好地控制和响应WebView 的页面导航事件，实现更加灵活和可定制的WebView集成方案。

以上就是WebView 导航请求拦截的相关内容，通过设置NavigationDelegate 并实现相应的回调方法，你可以对WebView的页面导航进行精细化的控制和处理。

[3. JavaScript交互](#3. JavaScript交互)

WebView 提供了与页面中JavaScript 代码交互的能力，可以在Flutter 和网页之间进行双向通信。通过设置JavaScript 执行模式、调用JavaScript 方法以及处理JavaScript 消息等方式，可以实现Flutter和网页之间的数据传递和功能交互。

[3.1 设置JavaScript执行模式](#3.1 设置JavaScript执行模式)

在使用WebView 与JavaScript 交互之前，需要先设置页面的JavaScript 执行模式。可以通过WebViewController 的 setJavaScriptMode 方法来设置不同的执行模式。

dart 复制代码 
// 启用JavaScript,不做任何限制
controller.setJavaScriptMode(JavaScriptMode.unrestricted);

// 禁用JavaScript
controller.setJavaScriptMode(JavaScriptMode.disabled);

JavaScriptMode枚举提供了两种模式:

  • JavaScriptMode.unrestricted: 不对JavaScript 执行做任何限制，允许执行任何JavaScript代码。

  • JavaScriptMode.disabled: 完全禁用JavaScript ，不允许执行任何 JavaScript代码。

根据实际需求选择合适的JavaScript 执行模式。如果需要与页面进行交互，就需要启用JavaScript ；如果出于安全考虑，可以禁用 JavaScript。

[3.2 调用JavaScript方法](#3.2 调用JavaScript方法)

在启用JavaScript 的情况下，可以通过WebViewController 的runJavaScript方法在页面中执行JavaScript代码。

dart 复制代码 
// 执行JavaScript代码
controller.runJavaScript('alert("Hello from Flutter!")');

runJavaScript方法接受一个字符串参数，表示要执行的JavaScript 代码。可以在字符串中编写任意的JavaScript代码，例如调用页面中定义的函数、修改页面元素、获取页面数据等。

dart 复制代码 
// 调用页面中的JavaScript函数
controller.runJavaScript('showMessage("Hello from Flutter!")');

// 修改页面元素的内容
controller.runJavaScript('document.getElementById("message").innerText = "Modified by Flutter"');

// 获取页面数据并传递给Flutter
controller.runJavaScript('window.flutter_inappwebview.callHandler("myHandler", document.title)');

通过runJavaScript方法，可以在Flutter中动态地执行 JavaScript代码，实现对网页的控制和交互。

[3.3 处理JavaScript消息](#3.3 处理JavaScript消息)

除了主动调用JavaScript 方法外，还可以通过注册JavaScript 通道的方式，处理JavaScript 通道的方式，处理网页发送的消息。可以使用WebViewController 的addJavaScriptChannel方法注册一个JavaScript通道，用于接收来自网页的消息。

dart 复制代码 
// 注册JavaScript通道
controller.addJavaScriptChannel(
  'myChannel',
  onMessageReceived: (JavaScriptMessage message) {
    print('从JavaScript接收到消息: ${message.message}');
    // 处理接收到的消息
  },
);

addJavaScriptChannel方法接受两个参数:

  • name： JavaScript通道的名称，在网页中通过该名称向Flutter发送消息。

  • onMessageReceived：接收到消息时的回调函数，可以在其中处理接收到的消息。

在网页中，可以通过window.flutter_inappwebview.callHandler方法向指定的JavaScript通道发送消息。

addJavaScriptChannel方法接受两个参数:

  • name：JavaScript 通道的名称，在网页中通过该名称向Flutter发送消息。

  • onMessageReceived：接收到消息时的回调函数，可以在其中处理接收到的消息。

在网页中，可以通过window.flutter_inappwebview.callHandler方法向指定的JavaScript通道发送消息。

js 复制代码 
// 在网页中向Flutter发送消息
window.flutter_inappwebview.callHandler('myChannel', 'Hello from JavaScript!');

当网页调用window.flutter_inappwebview.callHandler方法时，Flutter 中注册的对应JavaScript 通道的onMessageReceived回调函数将被触发，可以在回调函数中接收并处理消息。

通过JavaScript 通道，可以实现网页向Flutter 发送消息，Flutter 接收并处理消息的功能，实现了网页到Flutter的单向通信。

需要注意的是，JavaScript 通道的名称在Flutter和网页中要保持一致，才能正确地发送和接收消息。

通过设置JavaScript 执行模式、调用JavaScript 方法以及处理JavaScript 消息，可以在Flutter 和网页之间实现双向的数据传递和功能交互。根据实际需求，灵活运用这些方法，可以构建功能丰富、交互性强的WebView应用。

[4. 页面加载事件](#4. 页面加载事件)

WebView 在加载页面的过程中会触发一系列事件，通过设置WebViewController 的navigationDelegate属性，可以监听并处理这些事件。NavigationDelegate提供了多个回调方法，用于获取页面加载的不同阶段和状态。

[4.1 开始加载](#4.1 开始加载)

当WebView 开始加载一个新页面时，会触发onPageStarted回调。可以通过实现该回调方法来获取页面开始加载的事件。

dart 复制代码 
controller.setNavigationDelegate(
  NavigationDelegate(
    onPageStarted: (String url) {
      print('页面开始加载: $url');
      // 执行其他操作,如显示加载指示器等
    },
  ),
);

在onPageStarted回调中，可以获取到当前开始加载的页面URL。可以根据需要执行一些操作，例如显示加载指示器、更新界面状态等。

例如：

dart 复制代码 
controller.setNavigationDelegate(
  NavigationDelegate(
    onPageStarted: (String url) {
      setState(() {
        isLoading = true; // 设置加载状态为true
      });
      print('页面开始加载: $url');
    },
  ),
);

在上面的示例中，当页面开始加载时，通过setState方法将isLoading状态设置为true，表示正在加载中。同时，将当前加载的URL打印出来。

[4.2 加载进度](#4.2 加载进度)

在页面加载过程中，WebView 会不断触发onProgress回调，提供当前页面加载的进度信息。可以通过实现该回调方法来获取页面加载进度的变化事件。

dart 复制代码 
controller.setNavigationDelegate(
  NavigationDelegate(
    onProgress: (int progress) {
      print('页面加载进度: $progress%');
      // 根据进度更新界面,如更新进度条等
    },
  ),
);

onProgress回调接收一个整数参数progress，表示当前页面加载的进度，取值范围为0到100。可以根据进度值更新界面，例如更新进度条的显示状态。

例如：

dart 复制代码 
controller.setNavigationDelegate(
  NavigationDelegate(
    onProgress: (int progress) {
      setState(() {
        loadingProgress = progress; // 更新加载进度值
      });
      print('页面加进度值: $progress%');
    },
  ),
);

在上面的示例中，通过setState方法将当前的加载进度值loadingProgress更新为最新的进度值。同时，将当前的加载进度打印出来。

可以在界面上使用进度条组件，如LinearProgressIndicator ，根据loadingProgress的值来更新进度条的显示状态。

dart 复制代码 
LinearProgressIndicator(
  value: loadingProgress / 100, // 将进度值转换为0到1之间的数值
),

通过监听WebView 的onProgress回调，可以实时获取页面加载的进度，并根据需要更新界面，提供更好的用户体验。

[4.3 加载完成](#4.3 加载完成)

当WebView 完成页面加载时，会触发onPageFinished回调。可以通过实现该回调方法来获取页面加载完成的事件。

dart 复制代码 
controller.setNavigationDelegate(
  NavigationDelegate(
    onPageFinished: (String url) {
      print('页面加载完成: $url');
      // 执行其他操作,如隐藏加载指示器等
    },
  ),
);

在onPageFinished回调中，可以获取到当前加载完成的页面URL 。可以根据需要执行一些操作，例如隐藏加载指示器、更新界面状态等。

例如：

dart 复制代码 
controller.setNavigationDelegate(
  NavigationDelegate(
    onPageFinished: (String url) {
      setState(() {
        isLoading = false; // 设置加载状态为false
      });
      print('页面加载完成: $url');
    },
  ),
);

[4.4 加载错误处理](#4.4 加载错误处理)

在WebView 加载页面的过程中，可能会遇到一些错误，如网络连接失败、资源无法加载等。可以通过实现NavigationDelegate 的onWebResourceError回调来获取和处理这些错误事件。

dart 复制代码 
controller.setNavigationDelegate(
  NavigationDelegate(
    onWebResourceError: (WebResourceError error) {
      print('页面加载错误: ${error.description}');
      // 处理错误,如显示错误提示、执行错误恢复逻辑等
    },
  ),
);

onWebResourceError回调接收一个WebResourceError对象作为参数，该对象包含了错误的相关信息，如错误描述、错误代码等。可以根据这些信息进行错误处理，例如显示错误提示、执行错误恢复逻辑等。

例如：

dart 复制代码 
controller.setNavigationDelegate(
  NavigationDelegate(
    onWebResourceError: (WebResourceError error) {
      setState(() {
        loadingError = error.description; // 保存错误描述
      });
      print('页面加载错误: ${error.description}');
      // 显示错误提示对话框
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: const Text('页面加载错误'),
            content: Text(error.description),
            actions: <Widget>[
              TextButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: const Text('确定'),
              ),
            ],
          );
        },
      );
    },
  ),
);

在上面的示例中，当页面加载过程中发生错误时，通过setState方法将错误描述保存到loadingError变量中。同时，将错误描述打印出来。

接下来，使用showDialog方法显示一个错误提示对话框，将错误描述作为对话框的内容显示给用户。用户可以通过点击"确定"按钮关闭对话框。

通过监听 WebView 的onWebResourceError回调，可以捕获页面加载过程中的错误事件，并根据需要进行相应的错误处理，如显示错误提示、执行错误恢复逻辑、记录错误日志等。这样可以提高应用的健壮性和用户体验。

需要注意的是，onWebResourceError回调可能会被多次触发，因为页面加载过程中可能会发生多个资源加载错误。可以根据实际需求决定是否对每个错误都进行处理，或者只处理某些特定类型的错误。

通过合理地处理 WebView 的加载完成和加载错误事件，可以让应用更加稳定和友好，提供更好的用户体验。

[5. Cookie管理](#5. Cookie管理)

WebView 中的Cookie 管理可以通过WebViewCookieManager 类来实现。WebViewCookieManager 提供了一些方法来设置、获取和清除Cookie数据。

[5.1 设置Cookie](#5.1 设置Cookie)

可以使用WebViewCookieManager 的setCookie方法来设置Cookie 数据。该方法接受一个Uri 对象和一个表示Cookie数据的字符串作为参数。例如：

dart 复制代码 
import 'package:webview_flutter/webview_flutter.dart';

// 设置Cookie
await WebViewCookieManager().setCookie(
  const WebViewCookie(
    name: 'my_cookie',
    value: 'cookie_value',
    domain: 'example.com',
    path: '/',
  ),
);

在上面的示例中，通过WebViewCookieManager 的setCookie方法设置了一个名为"my_cookie"的Cookie，其值为"cookie_value"，域为"example.com"，路径为"/"。

在上面的示例中，通过WebViewCookieManager 的setCookie方法设置了一个名为"my_cookie"的Cookie ，其值为"cookie_value"，域为"example.com"，路径为"/"。

[5.2 获取Cookie](#5.2 获取Cookie)

可以使用WebViewCookieManager 的getCookies方法来获取当前的Cookie 数据。该方法返回一个Future ，其结果是一个包含所有Cookie的**Set<Cookie>**集合。例如：

dart 复制代码 
import 'package:webview_flutter/webview_flutter.dart';

// 获取Cookie
final Set<WebViewCookie> cookies = await WebViewCookieManager().getCookies(
  const Uri(scheme: 'https', host: 'example.com'),
);

// 打印Cookie信息
for (final WebViewCookie cookie in cookies) {
  print('Cookie: ${cookie.name} = ${cookie.value}');
}

在上面的示例中，通过WebViewCookieManager 的getCookies方法获取了指定Uri 下的所有Cookie 。getCookies方法接受一个Uri 对象作为参数，表示要获取Cookie的域名和路径。

获取到的Cookie 集合可以进行遍历，打印出每个Cookie的名称和值。

[5.3 清除Cookie](#5.3 清除Cookie)

可以使用WebViewCookieManager 的clearCookies方法来清除所有的Cookie 数据。该方法会删除WebView 中存储的所有Cookie。例如：

dart 复制代码 
import 'package:webview_flutter/webview_flutter.dart';

// 清除所有Cookie
await WebViewCookieManager().clearCookies();

在上面的示例中，通过调用WebViewCookieManager 的clearCookies方法，可以清除WebView 中存储的所有Cookie数据。

调用clearCookies方法后，之前设置的所有Cookie将被删除，WebView 将不再携带这些Cookie信息进行请求。

需要注意的是，清除Cookie 操作是全局的，会影响所有使用WebView 的页面和请求。因此，请谨慎使用clearCookies方法，只在必要时进行清除操作。

通过合理地使用WebViewCookieManager 提供的setCookie、getCookies和clearCookies方法，可以方便地管理WebView 中的Cookie 数据，实现对Cookie的设置、获取和清除操作，从而满足不同的业务需求。

[6. 缓存管理](#6. 缓存管理)

WebView 提供了缓存管理的功能，可以通过WebViewController 执行JavaScript代码的方式对缓存进行添加、查看和清除操作。下面我们来详细介绍这些缓存管理的用法。

[6.1 添加缓存](#6.1 添加缓存)

可以通过WebViewController 的runJavaScript 方法执行JavaScript 代码，将数据添加到缓存中。例如，使用localStorage对象将数据存储到本地缓存中：

dart 复制代码 
// 添加缓存数据
controller.runJavaScript('''
  localStorage.setItem('key', 'value');
''');

在上面的示例中，通过runJavaScript方法执行了一段JavaScript 代码。使用localStorage对象的setItem方法，将键值对'key': 'value'存储到本地缓存中。

localStorage是Web Storage API 提供的一种本地存储机制，可以在浏览器中持久化存储键值对数据。通过localStorage.setItem方法可以将数据添加到缓存中，数据会一直保留，直到被显式删除或清除缓存。

[6.2 查看缓存](#6.2 查看缓存)

同样，可以通过WebViewController的runJavaScriptReturningResult方法执行JavaScript代码，获取当前缓存中的数据。例如，使用localStorage对象获取缓存中的数据：

dart 复制代码 
// 查看缓存数据
final String value = await controller.runJavaScriptReturningResult('''
  localStorage.getItem('key');
''');
print('缓存值: $value');

在上面的示例中，通过runJavaScriptReturningResult方法执行了一段JavaScript 代码，并返回执行结果。使用localStorage对象的getItem方法，根据指定的键'key'获取对应的缓存值。

runJavaScriptReturningResult方法会返回一个Future ，其结果是JavaScript 代码的返回值。通过await关键字等待异步操作完成，可以获取到缓存中存储的值，并将其打印出来。

[6.3 清除缓存](#6.3 清除缓存)

WebViewController 提供了clearCache方法，用于清除WebView 的缓存数据。调用该方法会删除WebView中的所有缓存，包括本地存储、会话存储、Cookie等。

dart 复制代码 
// 清除缓存
await controller.clearCache();

在上面的示例中，通过调用WebViewController 的clearCache方法，可以清除WebView中的所有缓存数据。

调用clearCache方法后，之前通过JavaScript 代码添加到缓存中的数据将被删除，WebView的缓存空间将被清空。这样可以释放存储空间，并确保后续的数据请求获取到最新的内容。

需要注意的是，clearCache方法是一个异步操作，需要使用await关键字等待其完成。在清除缓存的过程中，WebView可能会短暂地变得不可用，因此建议在合适的时机执行清除操作，例如在应用启动时或用户手动触发清除缓存的操作时。

[7. 加载本地内容](#7. 加载本地内容)

WebView 不仅可以加载网络上的页面，还支持加载本地的HTML 文件、Flutter 资源文件以及HTML字符串内容。下面我们来详细介绍这些加载本地内容的方法。

[7.1 加载本地HTML文件](#7.1 加载本地HTML文件)

WebViewController 提供了loadFile方法，可以加载本地文件系统中的HTML文件。该方法接受一个表示文件路径的字符串作为参数。

假设我们在Flutter 项目的assets目录下有一个名为local.html的HTML文件，可以通过以下代码加载该文件:

dart 复制代码 
// 加载本地HTML文件
await controller.loadFile('assets/local.html');

在上面的示例中，通过WebViewController 的loadFile方法加载了位于assets目录下的local.html文件。

loadFile方法会根据指定的文件路径查找并加载对应的HTML 文件。文件路径可以是相对于Flutter项目根目录的相对路径，也可以是绝对路径。

需要注意的是，在使用loadFile方法加载本地HTML 文件时，需要确保文件存在且路径正确。如果文件不存在或路径错误，WebView将无法正确加载文件内容。

[7.2 加载Flutter资源](#7.2 加载Flutter资源)

除了加载本地文件系统中的HTML 文件，WebViewController 还提供了loadFlutterAsset方法，用于加载Flutter应用中的资源文件。

假设我们在Flutter 项目的assets目录下有一个名为flutter_asset.html的HTML文件，可以通过以下代码加载该资源文件:

dart 复制代码 
// 加载Flutter资源文件
await controller.loadFlutterAsset('assets/flutter_asset.html');

在上面的示例中，通过WebViewController 的loadFlutterAsset方法加载了位于assets目录下的flutter_asset.html文件。

loadFlutterAsset方法会在Flutter应用的资源文件中查找指定的文件，并将其加载到WebView中。文件路径应该是相对于Flutter项目的assets目录的相对路径。

使用loadFlutterAsset方法加载Flutter 资源文件时，需要确保在pubspec.yaml文件中正确声明了要加载的资源文件。例如:

yaml 复制代码 
flutter:
  assets:
    - assets/flutter_asset.html

通过在pubspec.yaml文件中的flutter部分声明资源文件，可以确保在构建应用时将这些文件打包到应用的资源中，从而能够通过loadFlutterAsset方法进行加载。

[7.3 加载HTML字符串](#7.3 加载HTML字符串)

除了加载本地文件和Flutter 资源外，WebViewController 还提供了loadHtmlString方法，可以直接加载HTML字符串内容。

dart 复制代码 
// 加载HTML字符串
await controller.loadHtmlString('''
  <html>
    <body>
      <h1>Hello, Flutter!</h1>
      <p>This is an HTML string loaded in WebView.</p>
    </body>
  </html>
''');

在上面的示例中，通过WebViewController 的loadHtmlString方法加载了一段HTML字符串内容。

loadHtmlString方法接受一个表示HTML 内容的字符串作为参数，并将其直接加载到WebView 中进行显示。这种方式适用于动态生成的HTML内容或从其他来源获取的HTML字符串。

使用loadHtmlString方法加载HTML 字符串时，可以在字符串中包含完整的HTML 结构，包括<html>、<body>等标签。WebView 会将该字符串作为完整的HTML页面进行解析和渲染。

需要注意的是，通过loadHtmlString方法加载的HTML内容是在内存中生成的，并没有对应的本地文件或网络资源。因此，如果HTML内容中引用了外部资源(如图片、样式表等)，需要确保这些资源可以正确加载，否则可能会影响页面的显示效果。

通过合理地使用loadFile、loadFlutterAsset和loadHtmlString方法，可以灵活地加载本地的HTML文件、Flutter资源文件以及HTML字符串内容，满足不同的需求场景。这样可以在WebView中显示各种本地内容，提供更加丰富和定制化的用户体验。

相关推荐
LawrenceLan21 小时前
Flutter 零基础入门（九）：构造函数、命名构造函数与 this 关键字
开发语言·flutter·dart
一豆羹1 天前
macOS 环境下 ADB 无线调试连接失败、Protocol Fault 及端口占用的深度排查
flutter
行者961 天前
OpenHarmony上Flutter粒子效果组件的深度适配与实践
flutter·交互·harmonyos·鸿蒙
行者961 天前
Flutter与OpenHarmony深度集成：数据导出组件的实战优化与性能提升
flutter·harmonyos·鸿蒙
小雨下雨的雨1 天前
Flutter 框架跨平台鸿蒙开发 —— Row & Column 布局之轴线控制艺术
flutter·华为·交互·harmonyos·鸿蒙系统
小雨下雨的雨1 天前
Flutter 框架跨平台鸿蒙开发 —— Center 控件之完美居中之道
flutter·ui·华为·harmonyos·鸿蒙
小雨下雨的雨1 天前
Flutter 框架跨平台鸿蒙开发 —— Icon 控件之图标交互美学
flutter·华为·交互·harmonyos·鸿蒙系统
小雨下雨的雨1 天前
Flutter 框架跨平台鸿蒙开发 —— Placeholder 控件之布局雏形美学
flutter·ui·华为·harmonyos·鸿蒙系统
行者961 天前
OpenHarmony Flutter弹出菜单组件深度实践：从基础到高级的完整指南
flutter·harmonyos·鸿蒙
前端不太难1 天前
Flutter / RN / iOS，在长期维护下的性能差异本质
flutter·ios
热门推荐
01GitHub 镜像站点02Labelme从安装到标注：零基础完整指南03安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）04Linux下V2Ray安装配置指南05Claude Code 2.1.2 升级报错？别折腾了，一行命令搞定06jdk21下载、安装（Windows、Linux、macOS）07【踩坑笔记】50系显卡适配的 PyTorch 安装082025-04-03 Latex学习1——本地配置Latex + VScode环境09KGG转MP3工具|非KGM文件|解密音频10Overleaf编译超时，超出免费计划编译时限（已解决）