flutter开发实战-webview_flutter 4.x版本使用

在之前使用的webview_flutter版本是3.x的，升级到4.x后，使用方式有所变化。
在这里插入图片描述

一、webview_flutter

在工程的pubspec.yaml中引入插件

  webview_flutter: ^4.4.2

二、使用webview_flutter

在4.x版本中，我们使用WebViewController来监听加载的状态

代码如下

controller..setJavaScriptMode(JavaScriptMode.unrestricted)..setBackgroundColor(const Color(0x00000000))..setNavigationDelegate(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('''
Page resource error:code: ${error.errorCode}description: ${error.description}errorType: ${error.errorType}isForMainFrame: ${error.isForMainFrame}''');},onNavigationRequest: (NavigationRequest request) {if (request.url.startsWith('https://') ||request.url.startsWith('http://')) {return NavigationDecision.navigate;}return NavigationDecision.prevent;},onUrlChange: (UrlChange change) {debugPrint('url change to ${change.url}');},// onHttpAuthRequest: (HttpAuthRequest request) {//   openDialog(request);// },),)..addJavaScriptChannel('Toaster',onMessageReceived: (JavaScriptMessage message) {ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(message.message)),);},)..loadRequest(Uri.parse('https://baidu.com'));// #docregion platform_featuresif (controller.platform is AndroidWebViewController) {AndroidWebViewController.enableDebugging(true);(controller.platform as AndroidWebViewController).setMediaPlaybackRequiresUserGesture(false);}// #enddocregion platform_features_controller = controller;

注意这个addJavaScriptChannel，之前3.x版本中有一个JavaScriptChannel类，在4.x版本中没有了。

这个JavaScriptChannel可以方便实现与JS的交互

final WebViewController controller = WebViewController();
controller.addJavaScriptChannel('Print',onMessageReceived: (JavaScriptMessage message) {print(message.message);},
);

JavaScript可以这样调用:

Print.postMessage('Hello');

我们为了方便JS与flutter调用，需要改造一下。使用JSBridge实现逻辑来嵌套使用该JavaScriptChannel

4.x版本使用完整代码如下

// 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_docsimport '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/webview_flutter.dart';// #docregion platform_imports
// Import for Android features.
import 'package:webview_flutter_android/webview_flutter_android.dart';// Import for iOS features.
import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';
// #enddocregion platform_importsclass WebViewPage extends StatefulWidget {const WebViewPage({super.key});@overrideState<WebViewPage> createState() => _WebViewPageState();
}class _WebViewPageState extends State<WebViewPage> {late final WebViewController _controller;@overridevoid initState() {super.initState();// #docregion platform_featureslate final PlatformWebViewControllerCreationParams params;if (WebViewPlatform.instance is WebKitWebViewPlatform) {params = WebKitWebViewControllerCreationParams(allowsInlineMediaPlayback: true,mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},);} else {params = const PlatformWebViewControllerCreationParams();}final WebViewController controller =WebViewController.fromPlatformCreationParams(params);// #enddocregion platform_featurescontroller..setJavaScriptMode(JavaScriptMode.unrestricted)..setBackgroundColor(const Color(0x00000000))..setNavigationDelegate(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('''
Page resource error:code: ${error.errorCode}description: ${error.description}errorType: ${error.errorType}isForMainFrame: ${error.isForMainFrame}''');},onNavigationRequest: (NavigationRequest request) {if (request.url.startsWith('https://') ||request.url.startsWith('http://')) {return NavigationDecision.navigate;}return NavigationDecision.prevent;},onUrlChange: (UrlChange change) {debugPrint('url change to ${change.url}');},// onHttpAuthRequest: (HttpAuthRequest request) {//   openDialog(request);// },),)..addJavaScriptChannel('Toaster',onMessageReceived: (JavaScriptMessage message) {ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(message.message)),);},)..loadRequest(Uri.parse('https://baidu.com'));// #docregion platform_featuresif (controller.platform is AndroidWebViewController) {AndroidWebViewController.enableDebugging(true);(controller.platform as AndroidWebViewController).setMediaPlaybackRequiresUserGesture(false);}// #enddocregion platform_features_controller = controller;}@overrideWidget build(BuildContext context) {return Scaffold(backgroundColor: Colors.green,appBar: AppBar(title: const Text('Flutter WebView example'),// This drop down menu demonstrates that Flutter widgets can be shown over the web view.),body: WebViewWidget(controller: _controller),);}
}