Flutter WebView插件webview_flutter_wkwebview_pagecall_poc的使用

Flutter WebView插件webview_flutter_wkwebview_pagecall_poc的使用

简介

webview_flutter_wkwebview 是 webview_flutter 插件的 Apple WKWebView 实现。它允许开发者在 Flutter 应用中嵌入高性能的网页视图。

使用方法

要使用 webview_flutter_wkwebview，只需按照以下步骤操作即可：

1. 在 pubspec.yaml 文件中添加依赖：

   dependencies:
     webview_flutter_wkwebview: ^latest_version
   

   替换 latest_version 为最新版本号。

2. 运行 flutter pub get 来安装依赖。

3. 在代码中直接使用 webview_flutter，该插件会自动包含 webview_flutter_wkwebview 的实现。

完整示例代码

以下是使用 webview_flutter_wkwebview 的完整示例代码：

// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// ignore_for_file: public_member_api_docs

import 'dart:async';
import 'dart:io';
import 'dart:typed_data';

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

void main() {
  runApp(const MaterialApp(home: WebViewExample()));
}

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

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

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

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

    _controller = PlatformWebViewController(
      WebKitWebViewControllerCreationParams(allowsInlineMediaPlayback: true),
    )
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x80000000))
      ..setPlatformNavigationDelegate(
        PlatformNavigationDelegate(
          const PlatformNavigationDelegateCreationParams(),
        )
          ..setOnProgress((int progress) {
            debugPrint('WebView is loading (progress : $progress%)');
          })
          ..setOnPageStarted((String url) {
            debugPrint('Page started loading: $url');
          })
          ..setOnPageFinished((String url) {
            debugPrint('Page finished loading: $url');
          })
          ..setOnWebResourceError((WebResourceError error) {
            debugPrint('''
Page resource error:
  code: ${error.errorCode}
  description: ${error.description}
  errorType: ${error.errorType}
  isForMainFrame: ${error.isForMainFrame}
          ''');
          })
          ..setOnNavigationRequest((NavigationRequest request) {
            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;
          }),
      )
      ..addJavaScriptChannel(JavaScriptChannelParams(
        name: 'Toaster',
        onMessageReceived: (JavaScriptMessage message) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text(message.message)),
          );
        },
      ))
      ..loadRequest(LoadRequestParams(
        uri: Uri.parse('https://flutter.dev'),
      ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView Example'),
      ),
      body: PlatformWebViewWidget(
        PlatformWebViewWidgetCreationParams(controller: _controller),
      ).build(context),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          final String? url = await _controller.currentUrl();
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('Current URL: $url')),
          );
        },
        child: const Icon(Icons.link),
      ),
    );
  }
}

代码说明

1. 初始化 WebView

   • 使用 PlatformWebViewController 创建一个 WebView 控制器。
   • 配置导航委托 (PlatformNavigationDelegate) 来拦截导航请求并处理加载进度、页面开始加载、结束加载等事件。

2. JavaScript 通信

   • 添加了一个名为 Toaster 的 JavaScript 通道，用于与 WebView 中的 JavaScript 交互。

3. 加载网页

   • 使用 loadRequest 方法加载指定的 URL（如 https://flutter.dev）。

4. 浮动按钮

   • 提供一个浮动按钮，用于获取当前加载的 URL 并显示在 SnackBar 中。

运行效果

运行此代码后，您将看到一个带有导航栏的 WebView，能够加载指定的网页，并且可以通过浮动按钮查看当前加载的 URL。

贡献指南

如果您想为该插件贡献代码或修复问题，请参考以下步骤：

1. 编辑 pigeons/web_kit.dart 文件以更新通信接口。
2. 运行以下命令生成通信层：

   flutter pub run pigeon --input pigeons/web_kit.dart
   

3. 使用 build_runner 生成测试所需的模拟对象：

   flutter pub run build_runner build --delete-conflicting-outputs