作者:手机用户2502882291 | 来源:互联网 | 2023-05-19 06:41
目前,移动跨平台开发作为移动开发的重要组成部分,是移动开发者必须掌握的技能,也是自我提升的重要手段。作为Google推出的跨平台技术方案,Flutter具有诸多的优势,已经或正在被
目前,移动跨平台开发作为移动开发的重要组成部分,是移动开发者必须掌握的技能,也是自我提升的重要手段。作为Google推出的跨平台技术方案,Flutter具有诸多的优势,已经或正在被广大开发者应用在移动应用开发中。在过去的2019年,我看到越来越多的公司和个人开始使用Flutter来开发跨平台应用,对于移动应用开发来说,Flutter能够满足几乎所有的业务开发需求,所以,学习Flutter正当时。
众所周知,使用Flutter进行项目开发时,就免不了要加载H5页面,在移动开发中打开H5页面需要使用WebView组件。同时,为了和H5页面进行数据交换,有时候还需要借助jsBridge来实现客户端与H5之间的通讯。除此之外,Hybrid开发模式也需要Webview与js做频繁的交互。
本文使用的是Flutter官方的webview_flutter组件,目前的最新版本是0.3.19+9。使用前需要先添加webview_flutter插件依赖,如下所示。
webview_flutter: 0.3.19+9
然后,使用flutter packages get命令将插件拉取到本地并保持依赖。由于加载WebView需要使用网络,所以还需要在android中添加网络权限。打开目录android/app/src/main/AndroidManifest.xml,然后添加如下代码即可。
<uses-permission android:name="android.permission.INTERNET"/>
由于iOS在9.0版本默认开启了Https,所以要运行Http的网页,还需要在ios/Runner/Info.plist文件中添加如下代码。
<key>io.flutter.embedded_views_previewkey>
<string>YESstring>
基本使用
打开WebView组件的源码,WebView组件的构造函数如下所示。
const WebView({
Key key,
this.onWebViewCreated,
this.initialUrl,
this.JavascriptMode = JavascriptMode.disabled,
this.JavascriptChannels,
this.navigationDelegate,
this.gestureRecognizers,
this.onPageStarted,
this.onPageFinished,
this.debuggingEnabled = false,
this.gestureNavigatiOnEnabled= false,
this.userAgent,
this.initialMediaPlaybackPolicy =
AutoMediaPlaybackPolicy.require_user_action_for_all_media_types,
}) : assert(JavascriptMode != null),
assert(initialMediaPlaybackPolicy != null),
super(key: key);
其中,比较常见的属性的含义如下:
- onWebViewCreated:在WebView创建完成后调用,只会被调用一次;
- initialUrl:初始load的url;
- JavascriptMode:JS执行模式(是否允许JS执行);
- JavascriptChannels:JS和Flutter通信的Channel;
- navigationDelegate:路由委托(可以通过在此处拦截url实现JS调用Flutter部分);
- gestureRecognizers:手势监听;
- onPageFinished:WebView加载完毕时的回调。import 'dart:async';
使用Webview加载网页时,很多时候需要与JS进行交互,即JS调用Flutter和Flutter调用JS。Flutter调用JS比较简单,直接调用 _controller.evaluateJavascript()函数即可。而JS调用Flutter则比较烦一点,之所以比较烦,是因为JavascriptChannels目录只支持字符串类型,并且JS的方法是固定的,即只能使用postMessage方法,对于iOS来说没问题,但是对于Android来说就有问题,当然也可以通过修改源码来实现。
JS调用Flutter
JavascriptChannels方式
JavascriptChannels方式也是推荐的方式,主要用于JS给Flutter传递数据。例如,有如下JS代码。
function callFlutter(){
Toast.postMessage("JS调用了Flutter");
}
使用postMessage方式 Toast 是定义好的名称,在接受的时候要拿这个名字 去接收,Flutter端的代码如下。
WebView(
JavascriptChannels: [
_alertJavascriptChannel(context),
].toSet(),
)
JavascriptChannel _alertJavascriptChannel(BuildContext context) {
return JavascriptChannel(
name: 'Toast',
onMessageReceived: (JavascriptMessage message) {
showToast(message.message);
});
}
navigationDelegate
除此之外,另一种方式是navigationDelegate,主要是加载网页的时候进行拦截,例如有下面的JS协议。
document.location = "js://webview?arg1=111&args2=222";
对应的Flutter代码如下。
navigationDelegate: (NavigationRequest request) {
if (request.url.startsWith('js://webview')) {
showToast('JS调用了Flutter By navigationDelegate');
print('blocking navigation to $request}');
Navigator.push(context,
new MaterialPageRoute(builder: (context) => new testNav()));
return NavigationDecision.prevent;
}
print('allowing navigation to $request');
return NavigationDecision.navigate;
其中,NavigationDecision.prevent表示阻止路由替换,NavigationDecision.navigate表示允许路由替换。
vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.com
JSBridge
除此之外,我们还可以自己开发JSBridge,并建立一套通用规范。首先,需要与H5开发约定协议,建立Model。
class JsBridge {
String method;
然后,对接收到的H5方法进行内部处理。举个例子,客户端向H5提供了打开微信App的接口openWeChatApp,如下所示。
class JsBridgeUtil {
为了让我们封装得WebView变得更加通用,可以对Webview进行封装,如下所示。
final String url;
final String title;
WebViewController webViewController;
当JS需要调用Flutter时,直接调用JsBridge即可,如下所示。
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
cOntent=">
<meta http-equiv="X-UA-Compatible" cOntent="ie=edge">
<title>Documenttitle>
head>
<script src="https://cdn.bootcss.com/jquery/2.0.1/jquery.js">script>
<body>
coming baby!
<script>
var str = navigator.userAgent;
if (str.includes('FoxApp')) {
FoxApp.postMessage(JSON.stringify({method:"openWeChatApp"}));
} else {
$('body').html('hello world
');
}
script>
body>
html>