在Google的大力推广下，flutter已经成为移动开发的新宠儿，今天我们来讲讲Flutter 官方维护的 webview_flutter；官方文档点此查看；官方Github样例点此查看。本文将从这几个基本点进行讲述：
- 基本使用方法
- 加载本地html
- 网络错误页面处理
- 加载页面处理
- js和webview互相调用
使用效果图
基本使用方式
pubspec.yaml 文件中导入我们要用的包
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
connectivity: ^0.4.6+1
url_launcher: ^5.4.1
webview_flutter: ^0.3.19+7
provider: ^3.2.0
引入包后我们就能在代码里直接使用WebView了，我们来看看WebView里都有哪些主要参数
WebView(
initialUrl: url, //需要打开的url
//是否支持js 默认是不支持的，
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController controller) {
//页面加载的时候可以获取到controller可以用来reload等操作
_webViewController = controller;
},
//加载js方法到页面内，js通过此来调用flutter的方法
javascriptChannels: _loadJavascriptChannel(context),
onPageStarted: (String url) {
},
onPageFinished: (String url) {
},
//拦截页面url
navigationDelegate: (NavigationRequest request) {
if (request.url.startsWith('alipays:') ||
request.url.startsWith('weixin:')) {
_openPay(context, request.url);
return NavigationDecision.prevent;
}
return NavigationDecision.navigate;
},
),
以上便是webview_flutter最基础的用法。
加载本地html
先将html文件放入assets文件夹下
image.png
不要忘了在pubspec.yaml中配置资源文件
image.png
一切准备就绪后就很简单了
Future<void> _loadHtmlFromAsset() async {
String html = 'assets/static/test.html';
final String path = await rootBundle.loadString(html);
//webviewController 在webview初始化时可获得
_webViewController.loadUrl(Uri.dataFromString(path,
mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
.toString());
}
加载页面以及错误页面处理
由于flutter_webview 没有提供网页具体的加载进度，所以只能在页面开始的时候做加载框，页面加载完成的时候关闭加载框，网络错误页面处理是通过判断网络状态来处理的，此处用了三个叠加的页面来展现
image.png
网页开始加载的时候，加载页面在最顶层，加载结束后让webview出现在顶层，如果加载的过程中检测到网络出错就将错误页面展示出来。
js和webview_flutter 互相调用
我们先来看一段简单的html代码
<!DOCTYPE html>
<html>
<body>
<button onclick="callFlutter()">callFlutter</button>
<p id="p1" style="visibility:hidden;">
Flutter代码调用了JS方法.
</p>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://cdn.amazeui.org/amazeui/2.5.0/js/amazeui.min.js"></script>
<script type="text/javascript">
function callJS(message){
document.getElementById("p1").style.visibility = message;
}
</script>
<script type="text/javascript">
function callFlutter(){
Toaster.postMessage('js call flutter');
}
</script>
</body>
</html>
这里面包含了两个js方法 callFlutter() 和 callJS(message)，callFlutter 是按钮点击后会去调用Flutter的方法，callJS 是提供给Flutter调用的方法。
在Flutter代码中的具体体现为如下：
手续要允许js调用打开 javascriptMode: JavascriptMode.unrestricted,然后注入js方法
WebView(
initialUrl: url,
javascriptMode: JavascriptMode.unrestricted,
javascriptChannels: _loadJavascriptChannel(context),
),
Set<JavascriptChannel> _loadJavascriptChannel(BuildContext context) {
final Set<JavascriptChannel> channels = Set<JavascriptChannel>();
JavascriptChannel toastChannel = JavascriptChannel(
name: 'Toaster',
onMessageReceived: (JavascriptMessage message) {
Scaffold.of(context).showSnackBar(
SnackBar(content: Text(message.message)),
);
});
channels.add(toastChannel);
return channels;
}
我们可以写多个方法注入到页面当中，页面通过相应的名称postMessenge('xxx') 即可调用，我们这里用的是
Toaster.postMessage('js call flutter'); //Toaster 名字可自定义，只要flutter和js一致即可
Flutter调用页面的JS 方法使用，字符串完全匹配来执行的，
Future<void> evaluateJavascript() async {
print('evaluateJavascript');
_webViewController
?.evaluateJavascript('callJS(\'visible\');')
?.then((result) {
print(result);
});
webviewController 是在页面初始化时候获取的，为了保证JS方法被加载到页面当中，我们调用JS方法的时候最好是在页面加载完成后调用。此处 'callJS('visible');' 必须和html里定义的JS方法完全一致才能调用成功，尤其是传参的类型处理，我们一般传字符串过去，需要注意单双引号处理。
处理页面当中的微信支付和支付宝支付问题
如果我们页面需要调起微信和支付宝支付，我们可以通过拦截的形式来处理。
WebView(
initialUrl: url,
navigationDelegate: (NavigationRequest request) {
if (request.url.startsWith('alipays:') ||
request.url.startsWith('weixin:')) {
_openPay(context, request.url);
return NavigationDecision.prevent;
}
return NavigationDecision.navigate;
},
)
// 跳转外部支付
Future<void> _openPay(BuildContext context, String url) async {
print('payurl:' + url);
if (await canLaunch(url)) {
await launch(url);
} else {
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('未安装支付软件')),
);
}
}
webview添加header
做微信支付的时候，碰到支付网关问题要加referer，需要在header里加referer
_webViewController.loadUrl(url, headers: {
'Referer': url,
});
监听页面回退
当我们的页面支持多次跳转的时候，为了防止按返回键直接退出，我们需要监听返回按键，如果页面可以回退，则直接回退，如果不可以直接回退，则关闭页面。我们将最外层包裹 WillPopScope进行监听
image.png
Future<bool> _goBack(BuildContext context) async {
if (_webViewController != null && await _webViewController.canGoBack()) {
_webViewController.goBack();
return false;
}
return true;
}
获取web页面的title
如果我们需要获取web页面的title来设置页面的title，我们可以这样做
/// 获取当前加载页面的 title
Future<void> _loadTitle() async {
final String temp = await _webViewController.getTitle();
print('title:' + temp);
setState(() {
title = temp;
});
}
由于跨平台属性，webview_flutter 还是存在大量的坑点，让我们一起来慢慢填坑，以上代码可查看https://github.com/ShuaiJing/flutter_application_jing 分享不易，看到这里了就点个赞呗。
网友评论