Flutter笔记：关于WebView插件的用法（下）
Visit me at CSDN: https://jclee95.blog.csdn.net
My WebSite：http://thispage.tech/
Email: 291148484@163.com.
Shenzhen China
Address of this article:https://blog.csdn.net/qq_28550263/article/details/139613391
HuaWei:https://bbs.huaweicloud.com/blogs/428875
【介绍】：WebView是一个可以在移动应用中显示网页的组件。它基于原生的WebView控件(如iOS中的WKWebView和Android中的WebView)，提供了加载URL、显示HTML内容、与JavaScript交互等功能。通过在Flutter应用中使用WebView，我们可以方便地集成Web内容，并与之进行交互。本文介绍Flutter中WebView插件的用法。
WebView提供了一些自定义选项，可以根据需求对WebView的外观和行为进行定制。下面我们来详细介绍几种常见的自定义WebView的方法。
默认情况下，WebView的背景色是不透明的白色。如果需要实现WebView的透明效果，可以通过设置WebView的背景色为透明来实现。
// 设置WebView背景色为透明
controller.setBackgroundColor(Colors.transparent);
在上面的示例中，通过WebViewController的setBackgroundColor方法将WebView的背景色设置为Colors.transparent，表示完全透明。
设置透明背景后，WebView的内容将会显示在其下方的Flutter小部件之上。这样可以实现WebView与其他Flutter小部件的叠加和混合效果。
需要注意的是，设置透明背景只会影响WebView的背景色，而不会影响网页内容的背景色。如果网页本身设置了不透明的背景色，那么即使将WebView的背景色设置为透明，网页内容的背景色仍然会保持不透明。
用户代理(User Agent)是一个字符串，用于标识浏览器或客户端的身份和版本信息。WebView默认使用系统提供的用户代理字符串，但有时我们可能需要自定义用户代理以满足特定的需求。
// 自定义用户代理字符串
const String userAgent = 'MyApp/1.0';
await controller.setUserAgent(userAgent);
在上面的示例中，我们定义了一个自定义的用户代理字符串'MyApp/1.0'，表示我们的应用名称和版本号。然后通过WebViewController的setUserAgent方法将自定义的用户代理字符串设置给WebView。
设置自定义用户代理后，WebView在发送HTTP请求时将使用自定义的用户代理字符串，而不是默认的系统用户代理。这可以用于模拟特定的浏览器或客户端，或者向服务器传递额外的信息。
除了自定义用户代理外，还可以在WebView加载页面时设置自定义的HTTP请求头。这可以用于传递额外的信息给服务器，或者满足某些特殊的请求要求。
// 自定义HTTP请求头
await controller.loadRequest(
Uri.parse('https://example.com'),
headers: {
'X-Custom-Header': 'Value',
'Authorization': 'Bearer token',
},
);
在上面的示例中，通过WebViewController的loadRequest方法加载一个网址，并通过headers参数设置自定义的HTTP请求头。这里我们设置了两个自定义请求头:'X-Custom-Header'和'Authorization'，分别传递了一个自定义的值和身份验证的令牌。
设置自定义HTTP请求头后，WebView在发送HTTP请求时将包含这些自定义的请求头。服务器可以根据这些请求头的值来执行相应的操作，如身份验证、数据过滤等。
需要注意的是，并非所有的请求头都可以被自定义。有些请求头是由浏览器或WebView自动添加的，如'User-Agent'、'Referer'等。尝试自定义这些请求头可能会被浏览器或WebView忽略或覆盖。
通过合理地使用自定义WebView的选项，如透明背景、自定义用户代理和自定义HTTP请求头，可以根据实际需求对WebView的外观和行为进行定制，提供更加灵活和个性化的用户体验。同时，在自定义时也需要注意与目标网站的兼容性和请求头的限制，以确保WebView能够正常工作。
WebView在不同的平台上提供了一些特定的功能和配置选项。下面我们来详细介绍在Android平台上的一些特性。
在Android平台上，WebView提供了一些额外的功能和配置选项，可以根据需求进行定制和控制。
在进行Web开发和调试时，启用WebView的调试模式可以方便地进行调试和问题排查。在Android平台上，可以通过以下方式启用WebView的调试模式:
import 'package:webview_flutter_android/webview_flutter_android.dart';
// 启用WebView调试模式
if (controller.platform is AndroidWebViewController) {
AndroidWebViewController.enableDebugging(true);
}
在上面的示例中，我们首先判断当前的WebView平台是否为AndroidWebViewController。如果是，则通过调用AndroidWebViewController的enableDebugging方法，将参数设置为true，启用WebView的调试模式。
启用调试模式后，可以通过Chrome开发者工具进行Web开发和调试。在Chrome浏览器中打开"chrome://inspect"，可以看到当前连接的Android设备和正在运行的WebView实例。点击对应的WebView实例，即可打开Chrome开发者工具，进行元素审查、控制台调试、网络监控等操作。
需要注意的是，启用调试模式会对性能产生一定的影响，因此在生产环境中应该禁用调试模式。可以通过将enableDebugging方法的参数设置为false来禁用调试模式。
在Android平台上，WebView默认要求用户手势(如点击)才能触发媒体(如视频、音频)的播放。这是为了防止自动播放媒体对用户体验的影响。但是，在某些情况下，我们可能希望允许WebView自动播放媒体，无需用户手势。可以通过以下方式控制WebView中媒体播放器的行为：
import 'package:webview_flutter_android/webview_flutter_android.dart';
// 设置媒体播放器不需要用户手势
if (controller.platform is AndroidWebViewController) {
(controller.platform as AndroidWebViewController)
.setMediaPlaybackRequiresUserGesture(false);
}
在上面的示例中，我们首先判断当前的WebView平台是否为AndroidWebViewController。如果是，则通过将AndroidWebViewController的setMediaPlaybackRequiresUserGesture方法的参数设置为false，来允许WebView自动播放媒体，无需用户手势。
设置setMediaPlaybackRequiresUserGesture为false后，WebView中的媒体播放器将可以自动开始播放，无需用户的点击或其他交互操作。这在某些场景下可能很有用，如播放背景音乐、自动播放视频等。
需要注意的是，自动播放媒体可能会对用户体验产生负面影响，尤其是在移动设备上，因为它可能会消耗额外的带宽和电量。因此，在决定是否允许自动播放媒体时，需要根据具体的应用场景和用户需求进行权衡。
通过合理地使用Android平台提供的WebView特性，如调试模式和媒体播放控制，可以方便地进行Web开发和调试，以及根据需求定制WebView的行为。这样可以提供更加灵活和优化的用户体验，同时也要注意不同设置可能带来的影响和权衡。
WebView在iOS平台上提供了一些特定的功能和配置选项，可以根据需求进行定制和控制。下面我们来详细介绍在iOS平台上的一些特性。
在iOS平台上，WebView默认不支持内联(inline)的媒体播放，即在网页中嵌入的视频或音频元素无法直接在WebView中播放，而是会跳转到系统的媒体播放器进行播放。如果希望在WebView中实现内联的媒体播放，可以通过以下方式进行配置:
import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';
// 创建WebView控制器时启用内联媒体播放
final WebViewController controller = WebViewController(
initialUrl: 'https://example.com',
creationParams: const WebKitWebViewControllerCreationParams(
allowsInlineMediaPlayback: true,
),
);
在上面的示例中，我们在创建WebViewController时，通过设置WebKitWebViewControllerCreationParams的allowsInlineMediaPlayback属性为true，来启用WebView的内联媒体播放功能。
启用内联媒体播放后，WebView中嵌入的视频或音频元素将可以直接在WebView内部播放，无需跳转到系统的媒体播放器。这样可以提供更加流畅和一致的用户体验。
需要注意的是，启用内联媒体播放可能会对性能和资源消耗产生一定的影响，因为它需要在WebView中加载和渲染媒体内容。因此，在决定是否启用内联媒体播放时，需要根据具体的应用场景和用户需求进行权衡。
在iOS平台上，WebView默认支持通过手势进行页面的前进和后退导航。用户可以通过在WebView中向左或向右滑动来触发页面的前进或后退操作。如果希望禁用WebView的手势导航功能，可以通过以下方式进行配置：
import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';
// 禁用WebView的手势导航
if (controller.platform is WebKitWebViewController) {
(controller.platform as WebKitWebViewController)
.setAllowsBackForwardNavigationGestures(false);
}
在上面的示例中，我们首先判断当前的WebView平台是否为WebKitWebViewController。如果是，则通过将WebKitWebViewController的setAllowsBackForwardNavigationGestures方法的参数设置为false，来禁用WebView的手势导航功能。
禁用手势导航后，用户将无法通过在WebView中滑动来触发页面的前进或后退操作。这在某些场景下可能很有用，例如当你希望完全控制页面导航行为，或者想要避免用户意外触发导航操作时。
需要注意的是，禁用手势导航并不会影响其他的导航方式，如通过代码调用goBack或goForward方法，或者点击网页中的链接进行导航。它只是禁用了通过手势触发的导航操作。
通过合理地使用 iOS平台提供的WebView特性，如内联媒体播放和手势导航控制，可以根据需求定制WebView的行为，提供更加优化和个性化的用户体验。同时也要注意不同设置可能带来的影响和权衡，以确保WebView的性能和功能符合应用的要求。
WebView提供了一种监听控制台日志输出的机制，可以捕获网页中的console.log、console.warn、console.error等日志信息，并在Flutter应用中进行打印和处理。这对于调试和监控WebView中的JavaScript代码非常有帮助。
下面是一个示例，演示如何监听WebView的控制台日志输出，并在Flutter应用中进行打印：
import 'package:webview_flutter/webview_flutter.dart';
// ...
// 创建WebView控制器
final WebViewController controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setNavigationDelegate(
NavigationDelegate(
onPageStarted: (String url) {
// 页面开始加载时添加JavaScript日志监听
controller.runJavaScript('''
console.log = function(message) {
window.flutter_inappwebview.callHandler('consoleLog', message);
};
console.warn = function(message) {
window.flutter_inappwebview.callHandler('consoleWarn', message);
};
console.error = function(message) {
window.flutter_inappwebview.callHandler('consoleError', message);
};
''');
},
),
)
..addJavaScriptChannel(
'flutter_inappwebview',
onMessageReceived: (JavaScriptMessage message) {
// 处理JavaScript日志消息
switch (message.message) {
case 'consoleLog':
print('WebView Console Log: ${message.arguments}');
break;
case 'consoleWarn':
print('WebView Console Warn: ${message.arguments}');
break;
case 'consoleError':
print('WebView Console Error: ${message.arguments}');
break;
}
},
)
..loadRequest(Uri.parse('https://example.com'));
// ...
在上面的示例中，我们通过setNavigationDelegate设置了一个NavigationDelegate，并在onPageStarted回调中添加了JavaScript日志监听。
我们使用runJavaScript方法向WebView注入了一段JavaScript代码，重写了console.log、console.warn和console.error方法。当网页中调用这些方法时，会通过window.flutter_inappwebview.callHandler方法将日志消息发送给Flutter应用。
接着，我们通过addJavaScriptChannel添加了一个名为flutter_inappwebview的JavaScript通道，并在onMessageReceived回调中处理接收到的JavaScript日志消息。
根据消息的内容，我们可以判断是consoleLog、consoleWarn还是consoleError，并相应地进行打印和处理。例如，对于consoleLog消息，我们使用print语句将日志内容打印到控制台。
通过这种方式，我们就可以实时监听WebView中的控制台日志输出，并在Flutter应用中进行打印和处理。这对于调试和监控WebView中的JavaScript代码非常有帮助，可以方便地查看日志信息，定位问题，并进行相应的处理。
需要注意的是，由于JavaScript日志消息是通过JavaScript通道传递的，因此需要确保WebView已经加载完成，并且JavaScript环境已经准备就绪，才能正确地捕获和处理日志消息。可以在onPageFinished回调中添加相应的逻辑，以确保日志监听功能的正常工作。
另外，在处理JavaScript日志消息时，还可以根据需要进行过滤、格式化或存储等操作，以满足不同的调试和监控需求。例如，可以将日志消息写入文件、上传到服务器或与其他调试工具集成，以便进行更全面的分析和追踪。
在WebView加载页面时，如果遇到需要HTTP认证的请求，可以通过NavigationDelegate的onHttpAuthRequest回调来处理认证请求。
下面的例子，展示如何处理WebView的HTTP认证请求：
import 'package:webview_flutter/webview_flutter.dart';
// ...
// 创建WebView控制器
final WebViewController controller = WebViewController()
..setNavigationDelegate(
NavigationDelegate(
onHttpAuthRequest: (HttpAuthRequest request) async {
// 处理HTTP认证请求
if (request.host == 'example.com') {
// 提示用户输入凭据
final String username = await _showUsernameDialog();
final String password = await _showPasswordDialog();
// 返回认证凭据
return HttpAuthResponse(
username: username,
password: password,
action: HttpAuthResponseAction.proceed,
);
} else {
// 取消认证请求
return HttpAuthResponse(
action: HttpAuthResponseAction.cancel,
);
}
},
),
)
..loadRequest(Uri.parse('https://example.com'));
// ...
// 显示用户名输入对话框
Future<String> _showUsernameDialog() async {
// 实现用户名输入对话框的逻辑
// ...
}
// 显示密码输入对话框
Future<String> _showPasswordDialog() async {
// 实现密码输入对话框的逻辑
// ...
}
这里，我们通过setNavigationDelegate设置了一个NavigationDelegate，并实现了onHttpAuthRequest回调。
当WebView遇到需要HTTP认证的请求时，会触发onHttpAuthRequest回调，并传递一个HttpAuthRequest对象，其中包含了认证请求的相关信息，如主机(host)、领域(realm)等。
在onHttpAuthRequest回调中，我们可以根据请求的主机或其他条件来决定是否处理认证请求。例如，在示例中，我们只处理主机为'example.com'的认证请求。
如果决定处理认证请求，可以提示用户输入凭据(如用户名和密码)。这里我们使用了两个自定义的函数_showUsernameDialog和_showPasswordDialog来显示用户名和密码的输入对话框，并获取用户输入的值。
获取到用户输入的凭据后，我们可以通过返回一个HttpAuthResponse对象来提供认证凭据。在HttpAuthResponse中，我们设置了用户名(username)和密码(password)，并将action属性设置为HttpAuthResponseAction.proceed，表示继续进行认证。
如果决定取消认证请求，可以返回一个HttpAuthResponse对象，并将action属性设置为HttpAuthResponseAction.cancel，表示取消认证请求。
需要注意的是，onHttpAuthRequest回调是异步的，因此我们使用async和await来处理异步操作，如显示输入对话框和获取用户输入的值。
另外，在处理HTTP认证请求时，还需要考虑安全性和用户体验。应该根据具体的应用场景和安全要求，选择合适的认证方式和交互流程。例如，可以使用安全的认证协议(如HTTPS)、提供明确的用户提示和反馈、限制认证尝试次数等，以保护用户的凭据和隐私。
通过合理地处理WebView的HTTP认证请求，可以实现对受保护资源的访问控制，提高应用的安全性和用户体验。同时，也要注意处理认证请求时的异步性和错误处理，以确保应用的稳定性和可靠性。
在WebView中进行文件上传和下载时，需要进行一些特殊的处理和配置，以确保文件的正确传输和用户体验。下面我们分别介绍文件上传和下载的处理方式和注意事项。
当WebView加载的网页包含文件上传功能时，可以通过以下步骤来处理文件上传。
在Android平台上，需要在AndroidManifest.xml文件中添加文件读取权限，以允许WebView访问设备上的文件：
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
在iOS平台上，需要在Info.plist文件中添加文件访问权限，以允许WebView访问应用沙盒中的文件：
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
当网页中触发文件选择操作时，WebView会调用文件选择回调。可以通过实现WebChromeClient的onShowFileChooser方法来处理文件选择回调：
import 'package:webview_flutter/webview_flutter.dart';
// ...
final WebViewController controller = WebViewController()
..setWebChromeClient(
WebChromeClient(
onShowFileChooser: (WebViewController controller, FileChooserParams params) async {
// 处理文件选择回调
final List<String> acceptedTypes = params.acceptTypes;
final bool allowMultiple = params.mode == FileChooserMode.openMultiple;
// 使用文件选择器让用户选择文件
final List<String> selectedFiles = await _showFilePicker(acceptedTypes, allowMultiple);
// 将选择的文件路径返回给WebView
return selectedFiles;
},
),
);
// ...
// 显示文件选择器
Future<List<String>> _showFilePicker(List<String> acceptedTypes, bool allowMultiple) async {
// 实现文件选择器的逻辑
// ...
}
在onShowFileChooser回调中，可以获取文件选择的相关参数，如接受的文件类型(acceptedTypes)和是否允许多选(allowMultiple)。然后，可以使用文件选择器(如文件管理器或自定义的文件选择器)让用户选择文件。
选择文件后，将选择的文件路径作为List<String>返回给WebView，WebView会自动将这些文件上传到服务器。
需要注意的是，文件选择器的实现方式可能因平台而异。在Android平台上，可以使用Intent和ActivityResultLauncher来启动文件选择器并获取选择的文件路径。在iOS平台上，可以使用UIDocumentPickerViewController来显示文件选择器并获取选择的文件URL。
当WebView加载的网页触发文件下载时，可以通过以下步骤来处理文件下载：
可以通过实现WebViewClient的onDownloadStart方法来监听文件下载事件：
import 'package:webview_flutter/webview_flutter.dart';
// ...
final WebViewController controller = WebViewController()
..setWebViewClient(
WebViewClient(
onDownloadStart: (String url, String userAgent, String contentDisposition, String mimetype, int contentLength) {
// 处理文件下载
_startDownload(url, contentDisposition, mimetype);
},
),
);
// ...
// 开始下载文件
void _startDownload(String url, String contentDisposition, String mimetype) async {
// 实现文件下载的逻辑
// ...
}
在onDownloadStart回调中，可以获取下载文件的相关信息，如下载地址(url)、文件名(contentDisposition)、文件类型(mimetype)等。然后，可以使用这些信息来开始文件下载。
在Android平台上，需要请求文件写入权限，以允许WebView将文件保存到设备上。可以在AndroidManifest.xml文件中添加以下权限：
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
此外，还需要在运行时动态请求文件写入权限。可以使用permission_handler插件来简化权限请求的过程：
import 'package:permission_handler/permission_handler.dart';
// ...
// 请求文件写入权限
Future<bool> _requestWritePermission() async {
final PermissionStatus status = await Permission.storage.request();
return status == PermissionStatus.granted;
}
获得必要的权限后，可以使用http或dio等网络库来下载文件。下面是一个使用http库下载文件的示例：
import 'package:http/http.dart' as http;
import 'package:path_provider/path_provider.dart';
import 'dart:io';
// ...
// 开始下载文件
void _startDownload(String url, String contentDisposition, String mimetype) async {
// 请求文件写入权限(Android)
if (Platform.isAndroid) {
final bool hasPermission = await _requestWritePermission();
if (!hasPermission) {
// 没有文件写入权限,取消下载
return;
}
}
// 创建下载目录
final Directory directory = await getApplicationDocumentsDirectory();
final String filePath = '${directory.path}/${_getFileNameFromContentDisposition(contentDisposition)}';
// 发起下载请求
final http.Response response = await http.get(Uri.parse(url));
// 将下载的文件写入本地
final File file = File(filePath);
await file.writeAsBytes(response.bodyBytes);
// 通知用户下载完成
_showDownloadCompleteNotification(filePath);
}
// 从Content-Disposition头中提取文件名
String _getFileNameFromContentDisposition(String contentDisposition) {
// 实现从Content-Disposition头中提取文件名的逻辑
// ...
}
// 显示下载完成通知
void _showDownloadCompleteNotification(String filePath) {
// 实现显示下载完成通知的逻辑
// ...
}
在_startDownload方法中，首先判断是否有文件写入权限(Android平台)。如果没有权限，则取消下载。
然后，使用path_provider插件获取应用的文档目录，并根据Content-Disposition头中的文件名生成本地文件路径。
接着，使用http库发起下载请求，并将下载的文件写入本地文件系统。
最后，可以显示一个下载完成的通知，提示用户文件已成功下载。
需要注意的是，在处理文件下载时，还需要考虑以下几点：
- 错误处理:下载过程中可能会出现网络错误、文件写入错误等异常情况，需要进行适当的错误处理和用户提示。
- 下载进度：对于大文件的下载，可以显示下载进度，以提供更好的用户体验。可以通过监听下载进度事件来实现。
- 下载管理：如果应用支持多个文件同时下载，可以实现一个下载管理器，用于管理和跟踪所有的下载任务。
通过合理地处理WebView的文件下载，可以为用户提供方便的文件下载功能，同时确保下载过程的稳定性和可靠性。
- 点赞
- 收藏
- 关注作者
评论（0）