Flutter 学习之旅：封装 WebView 的那些事儿

大家好，我是小李，一名热爱编程的前端开发者。最近，我决定深入学习 Flutter，这个跨平台开发框架让我充满了期待。今天，我想和大家分享一下我在 Flutter 中封装 WebView 的经验，希望能对正在学习 Flutter 的你有所帮助。

### 为什么选择封装 WebView？

在我们日常开发中，WebView 是一个非常常见的组件，尤其是在需要加载网页或嵌入第三方服务时。Flutter 提供了官方的 webview_flutter 插件，但它的功能相对基础，无法满足一些复杂的需求。因此，封装 WebView 成为了我的首选。

封装 WebView 的好处有很多：

• 简化代码：通过封装，我们可以将常用的配置和功能封装成一个独立的组件，减少重复代码。
• 提高可维护性：当需求发生变化时，只需要修改封装的代码，而不需要在每个使用 WebView 的地方进行改动。
• 增强功能：可以根据项目需求，扩展 WebView 的功能，比如添加 JavaScript 桥接、处理 URL 跳转等。

### 封装 WebView 的步骤

接下来，我将详细介绍如何封装一个功能齐全的 WebView 组件。整个过程分为以下几个步骤：

1. 安装依赖
2. 创建 WebView 组件
3. 添加常用配置
4. 实现 JavaScript 桥接
5. 处理 URL 跳转
6. 优化性能

#### 1. 安装依赖

首先，我们需要在 pubspec.yaml 文件中添加 webview_flutter 依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.0.0

然后，在终端中运行 flutter pub get 来安装依赖。

#### 2. 创建 WebView 组件

接下来，我们创建一个新的 Dart 文件，命名为 custom_webview.dart，并在其中定义一个名为 CustomWebView 的类：

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

class CustomWebView extends StatefulWidget {
  final String url;
  final bool enableJavaScript;
  final Function(String)? onPageStarted;
  final Function(String)? onPageFinished;

  CustomWebView({
    required this.url,
    this.enableJavaScript = true,
    this.onPageStarted,
    this.onPageFinished,
  });

  @override
  _CustomWebViewState createState() => _CustomWebViewState();
}

在这里，我们定义了一些常用的参数，比如 url（要加载的网页地址）、enableJavaScript（是否启用 JavaScript）、以及两个回调函数 onPageStarted 和 onPageFinished，用于监听页面加载的开始和结束。

#### 3. 添加常用配置

在 _CustomWebViewState 中，我们可以添加一些常用的配置，比如设置初始缩放比例、禁止缩放、启用本地存储等：

class _CustomWebViewState extends State<CustomWebView> {
  late WebViewController _controller;

  @override
  void initState() {
    super.initState();
    if (WebView.platform == null && defaultTargetPlatform == TargetPlatform.android) {
      WebView.platform = SurfaceAndroidWebView();
    }
  }

  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: widget.url,
      javascriptMode: widget.enableJavaScript ? JavascriptMode.unrestricted : JavascriptMode.disabled,
      onWebViewCreated: (WebViewController webViewController) {
        _controller = webViewController;
      },
      onPageStarted: (String url) {
        if (widget.onPageStarted != null) {
          widget.onPageStarted!(url);
        }
      },
      onPageFinished: (String url) {
        if (widget.onPageFinished != null) {
          widget.onPageFinished!(url);
        }
      },
      gestureNavigationEnabled: true,
      allowsInlineMediaPlayback: true,
      initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow,
      zoomEnabled: false,
      javascriptChannels: Set.from([
        JavascriptChannel(
          name: 'Toaster',
          onMessageReceived: (JavascriptMessage message) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text(message.message)),
            );
          },
        ),
      ]),
    );
  }
}

这里我们做了以下几件事：

• 设置了 javascriptMode，根据传入的参数决定是否启用 JavaScript。
• 监听了页面加载的开始和结束，并调用了对应的回调函数。
• 启用了手势导航和内联媒体播放。
• 禁用了缩放功能，以防止用户误操作。
• 添加了一个 JavaScript 通道，用于与网页进行交互。

#### 4. 实现 JavaScript 桥接

JavaScript 桥接是 WebView 中非常重要的功能之一，它允许我们在 Flutter 和网页之间进行通信。我们可以通过 JavascriptChannel 来实现这一点。在上面的代码中，我已经添加了一个名为 Toaster 的 JavaScript 通道，它可以在网页中调用 Flutter 的 showSnackBar 方法，显示一个提示框。

如果你想从 Flutter 调用网页中的 JavaScript 代码，可以使用 WebViewController 的 runJavascript 方法。例如：

_controller.runJavascript('alert("Hello from Flutter!")');

#### 5. 处理 URL 跳转

在实际开发中，我们可能需要监听页面的 URL 跳转，并根据不同的 URL 进行相应的处理。我们可以通过 navigationDelegate 来实现这一点。例如：

WebView(
  // ... 其他配置
  navigationDelegate: (NavigationRequest request) {
    if (request.url.startsWith('https://example.com/')) {
      // 如果 URL 以 example.com 开头，则允许跳转
      return NavigationDecision.navigate;
    } else {
      // 否则，阻止跳转并打开系统浏览器
      launch(request.url);
      return NavigationDecision.prevent;
    }
  },
)

这样，我们就可以根据 URL 的不同，选择是否允许跳转，或者在外部浏览器中打开链接。

#### 6. 优化性能

最后，我们来谈谈如何优化 WebView 的性能。WebView 的性能问题主要体现在加载速度和内存占用上。为了提高加载速度，我们可以：

• 使用 initialUrl 加载缓存的 HTML 文件，而不是每次都从网络请求。
• 启用 HTTP 缓存，减少不必要的网络请求。
• 尽量减少 JavaScript 的使用，避免过多的 DOM 操作。

为了减少内存占用，我们可以在页面销毁时释放 WebView 的资源：

@override
void dispose() {
  _controller.clearCache();
  _controller.dispose();
  super.dispose();
}

### 总结

通过以上几个步骤，我们成功封装了一个功能齐全的 WebView 组件。这个组件不仅可以满足日常开发中的需求，还可以根据项目的具体情况进行扩展和优化。希望这篇文章能对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言，我们一起交流学习！