Flutter使用JsBridge方式处理Webview与H5通信的方法

2023-07-27 09:00:03 393

目前，移动跨平台开发作为移动开发的重要组成部分，是移动开发者必须掌握的技能，也是自我提升的重要手段。作为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!

到此这篇关于Flutter使用JsBridge方式处理Webview与H5通信的方法的文章就介绍到这了,更多相关FlutterWebview与H5通信内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

Flutter使用JsBridge方式处理Webview与H5通信的方法

热门推荐

随机推荐