Flutter WebView插件webview_flutter_wkwebview的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter WebView插件webview_flutter_wkwebview的使用

webview_flutter_wkwebview

webview_flutter_wkwebview 是 webview_flutter 插件的 Apple WKWebView 实现。它允许开发者在 iOS 应用中使用更高效、功能更强大的 WKWebView 来加载网页内容。

使用方法

这个包是被推荐使用的，这意味着你可以像平常一样使用 webview_flutter 包，而不需要显式地将 webview_flutter_wkwebview 添加到你的 pubspec.yaml 文件中，因为当使用 webview_flutter 时，它会被自动包含在你的应用中。

但是，如果你需要直接使用该包提供的 API，你仍然应该按照常规方式将其添加到 pubspec.yaml 中。

外部原生API

此外，此插件还提供了一个可以通过iOS应用程序或包的原生代码访问的原生API。这个API遵循Dart API的破坏性变更惯例，即任何非向后兼容的类更改只会在插件的主要版本更改时进行。除了这个外部API之外的原生代码不遵循破坏性变更惯例，因此应用程序或插件客户端不应使用其他原生API。

要访问API，你需要导入原生插件 webview_flutter_wkwebview：

#import <webview_flutter_wkwebview/webview_flutter_wkwebview.h>

然后你将能够访问原生类 FWFWebViewFlutterWKWebViewExternalAPI。

示例代码

下面是一个完整的示例demo，展示了如何使用 webview_flutter_wkwebview 插件来创建一个简单的WebView应用，并演示了各种操作如加载URL、处理JavaScript交互等。

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

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

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

// HTML页面字符串定义...
const String kNavigationExamplePage = '''
<!DOCTYPE html><html>
<head><title>Navigation Delegate Example</title></head>
<body>
<p>The navigation delegate is set to block navigation to the youtube website.</p>
<ul>
<ul><a href="https://www.youtube.com/">https://www.youtube.com/</a></ul>
<ul><a href="https://www.google.com/">https://www.google.com/</a></ul>
</ul>
</body>
</html>
''';

// 其他HTML页面定义...

class WebViewExample extends StatefulWidget {
  const WebViewExample({super.key, this.cookieManager});

  final PlatformWebViewCookieManager? cookieManager;

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

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

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

    // 初始化控制器并设置相关参数...
    _controller = PlatformWebViewController(
      WebKitWebViewControllerCreationParams(allowsInlineMediaPlayback: true),
    )
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setPlatformNavigationDelegate(
        // 设置导航代理...
      )
      ..addJavaScriptChannel(
        JavaScriptChannelParams(
          name: 'Toaster',
          onMessageReceived: (JavaScriptMessage message) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text(message.message)),
            );
          },
        ),
      )
      ..setOnPlatformPermissionRequest(
        (PlatformWebViewPermissionRequest request) {
          debugPrint(
            'requesting permissions for ${request.types.map((WebViewPermissionResourceType type) => type.name)}',
          );
          request.grant();
        },
      )
      ..loadRequest(LoadRequestParams(
        uri: Uri.parse('https://flutter.dev'),
      ));

    if (Platform.isIOS) {
      _controller.setBackgroundColor(const Color(0x80000000));
      _controller.setOnScrollPositionChange(
          (ScrollPositionChange scrollPositionChange) {
        debugPrint(
          'Scroll position change to x = ${scrollPositionChange.x}, y = ${scrollPositionChange.y}',
        );
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF4CAF50),
      appBar: AppBar(
        title: const Text('Flutter WebView example'),
        actions: [
          NavigationControls(webViewController: _controller),
          SampleMenu(
            webViewController: _controller,
            cookieManager: widget.cookieManager,
          ),
        ],
      ),
      body: PlatformWebViewWidget(
        PlatformWebViewWidgetCreationParams(controller: _controller),
      ).build(context),
      floatingActionButton: favoriteButton(),
    );
  }

  // 定义浮动按钮和其他辅助函数...
}

以上代码片段展示了一个基本的WebView应用结构，包括WebView初始化、加载网页、JavaScript通道通信以及一些UI元素（如导航控件和菜单）。请注意，完整代码中还包括了许多辅助函数和类，用于处理不同类型的交互和操作。为了保持简洁，这里只展示了主逻辑部分。


更多关于Flutter WebView插件webview_flutter_wkwebview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter WebView插件webview_flutter_wkwebview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用webview_flutter_wkwebview插件可以让你在iOS平台上利用WKWebView来加载网页内容。这个插件是webview_flutter的一个分支，专为iOS的WKWebView提供支持，以改进性能和安全性。以下是如何在Flutter项目中集成和使用webview_flutter_wkwebview的示例代码。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加webview_flutter_wkwebview依赖。注意，这个插件通常只在iOS平台上使用，因为Android默认已经使用webview_flutter支持的WebView。

dependencies:
  flutter:
    sdk: flutter
  webview_flutter_wkwebview: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

2. 配置iOS平台

由于webview_flutter_wkwebview是iOS专用的，你需要在ios/Podfile中确保启用了Swift支持（如果尚未启用）。通常，Flutter项目创建时已经启用了Swift支持，但如果你需要手动添加，可以打开ios/Podfile并确认存在以下内容：

platform :ios, '10.0'

# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
ENV['COCOAPODS_DISABLE_STATS'] = 'true'

project 'Runner', {
  'Debug': :debug,
  'Profile': :release,
  'Release': :release,
}

def flutter_root
  generated_xcode_build_settings_path = File.expand_path(File.join('..', 'Flutter', 'Generated.xcconfig'), __FILE__)
  unless File.exist?(generated_xcode_build_settings_path)
    raise "#{generated_xcode_build_settings_path} must exist. If you're running pod install manually, make sure flutter pub get is executed first"
  end

  File.foreach(generated_xcode_build_settings_path) do |line|
    matches = line.match(/FLUTTER_ROOT\=(.*)/)
    return matches[1].strip if matches
  end
  raise "FLUTTER_ROOT not found in #{generated_xcode_build_settings_path}. Try deleting Generated.xcconfig, then run flutter pub get"
end

require File.expand_path(File.join('packages', 'flutter_tools', 'bin', 'podhelper'), flutter_root)

flutter_ios_podfile_setup

target 'Runner' do
  use_frameworks!
  use_modular_headers!

  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
  end
end

3. 使用WebView

在你的Dart代码中，你可以按照以下方式使用webview_flutter_wkwebview。注意，这里我们使用了条件导入来区分iOS和Android平台。

import 'package:flutter/material.dart';
import 'dart:io' show Platform;

// 条件导入
if (Platform.isIOS) {
  import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';
} else {
  import 'package:webview_flutter/webview_flutter.dart';
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebViewExample(),
    );
  }
}

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Example'),
      ),
      body: WebView(
        initialUrl: 'https://flutter.dev',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          await _controller.loadUrl('https://google.com');
        },
        tooltip: 'Load another page',
        child: Icon(Icons.arrow_forward),
      ),
    );
  }
}

注意事项

  • 确保你的iOS开发环境配置正确，包括Xcode和CocoaPods。
  • 由于webview_flutter_wkwebview是特定于iOS的，因此你需要为Android使用标准的webview_flutter插件或进行条件编译。
  • 测试你的应用以确保在不同平台上的行为符合预期。

通过上述步骤，你应该能够在Flutter项目中成功集成并使用webview_flutter_wkwebview来显示网页内容。

回到顶部