Flutter使用JsBridge方式处理Webview与H5通信的方法
目前,移动跨平台开发作为移动开发的重要组成部分,是移动开发者必须掌握的技能,也是自我提升的重要手段。作为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
然后,使用flutterpackagesget命令将插件拉取到本地并保持依赖。由于加载WebView需要使用网络,所以还需要在android中添加网络权限。打开目录android/app/src/main/AndroidManifest.xml,然后添加如下代码即可。
由于iOS在9.0版本默认开启了Https,所以要运行Http的网页,还需要在ios/Runner/Info.plist文件中添加如下代码。
io.flutter.embedded_views_preview YES
基本使用
打开WebView组件的源码,WebView组件的构造函数如下所示。
constWebView({ Keykey, 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代码。
callFlutter functioncallFlutter(){ Toast.postMessage("JS调用了Flutter"); }
使用postMessage方式Toast是定义好的名称,在接受的时候要拿这个名字去接收,Flutter端的代码如下。
WebView( javascriptChannels:[ _alertJavascriptChannel(context), ].toSet(), ) JavascriptChannel_alertJavascriptChannel(BuildContextcontext){ returnJavascriptChannel( name:'Toast', onMessageReceived:(JavascriptMessagemessage){ showToast(message.message); }); }
navigationDelegate
除此之外,另一种方式是navigationDelegate,主要是加载网页的时候进行拦截,例如有下面的JS协议。
document.location="js://webview?arg1=111&args2=222";
对应的Flutter代码如下。
navigationDelegate:(NavigationRequestrequest){ if(request.url.startsWith('js://webview')){ showToast('JS调用了FlutterBynavigationDelegate'); print('blockingnavigationto$request}'); Navigator.push(context, newMaterialPageRoute(builder:(context)=>newtestNav())); returnNavigationDecision.prevent; } print('allowingnavigationto$request'); returnNavigationDecision.navigate;//必须有 },
其中,NavigationDecision.prevent表示阻止路由替换,NavigationDecision.navigate表示允许路由替换。
JSBridge
除此之外,我们还可以自己开发JSBridge,并建立一套通用规范。首先,需要与H5开发约定协议,建立Model。
classJsBridge{ Stringmethod;//方法名 Mapdata;//传递数据 Functionsuccess;//执行成功回调 Functionerror;//执行失败回调 JsBridge(this.method,this.data,this.success,this.error); ///jsonEncode方法中会调用实体类的这个方法。如果实体类中没有这个方法,会报错。 MaptoJson(){ Mapmap=newMap(); map["method"]=this.method; map["data"]=this.data; map["success"]=this.success; map["error"]=this.error; returnmap; } staticJsBridgefromMap(Mapmap){ JsBridgejsonModel=newJsBridge(map['method'],map['data'],map['success'],map['error']); returnjsonModel; } @override StringtoString(){ return"JsBridge:{method:$method,data:$data,success:$success,error:$error}"; } }
然后,对接收到的H5方法进行内部处理。举个例子,客户端向H5提供了打开微信App的接口openWeChatApp,如下所示。
classJsBridgeUtil{ ///将json字符串转化成对象 staticJsBridgeparseJson(StringjsonStr){ JsBridgejsBridgeModel=JsBridge.fromMap(jsonDecode(jsonStr)); returnjsBridgeModel; } ///向H5开发接口调用 staticexecuteMethod(context,JsBridgejsBridge)async{ if(jsBridge.method=='openWeChatApp'){ ///先检测是否已安装微信 bool_isWechatInstalled=awaitfluwx.isWeChatInstalled(); if(!_isWechatInstalled){ toast.show(context,'您没有安装微信'); jsBridge.error?.call(); return; } fluwx.openWeChatApp(); jsBridge.success?.call(); } } }
为了让我们封装得WebView变得更加通用,可以对Webview进行封装,如下所示。
finalStringurl; finalStringtitle; WebViewControllerwebViewController;//添加一个controller finalPrivacyProtocolDialogprivacyProtocolDialog; Webview({Keykey,this.url,this.title='',this.privacyProtocolDialog}) :super(key:key); @override WebViewStatecreateState()=>WebViewState(); } classWebViewStateextendsState{ boolisPhone=Adapter.isPhone(); JavascriptChannel_JsBridge(BuildContextcontext)=>JavascriptChannel( name:'FoxApp',//与h5端的一致不然收不到消息 onMessageReceived:(JavascriptMessagemsg)async{ StringjsonStr=msg.message; JsBridgeUtil.executeMethod(JsBridgeUtil.parseJson(jsonStr)); }); @override Widgetbuild(BuildContextcontext){ returnScaffold( backgroundColor:isPhone?Colors.white:Color(Config.foxColors.bg), appBar:AppBar( backgroundColor:isPhone?null:Color(Config.foxColors.bg), leading:AppIcon(Config.foxImages.backGreyUrl, callback:(){ Navigator.of(context).pop(true); if(widget.privacyProtocolDialog!=null){//解决切换页面时弹框显示异常问题 privacyProtocolDialog.show(context); } }), title:Text(widget.title), centerTitle:true, elevation:0, ), body:StoreConnector ( converter:(store)=>store.state.userState, builder:(context,userState){ returnWebView( initialUrl:widget.url, userAgent:"Mozilla/5.0FoxApp",//h5可以通过navigator.userAgent判断当前环境 javascriptMode:JavascriptMode.unrestricted,//启用js交互,默认不启用JavascriptMode.disabled javascriptChannels: [ _JsBridge(context)//与h5通信 ].toSet(), ); }), ); } }
当JS需要调用Flutter时,直接调用JsBridge即可,如下所示。
Document comingbaby!