這篇文章主要講解了Flutter如何使用JsBridge方式處理Webview與H5通信,內(nèi)容清晰明了,對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。
創(chuàng)新互聯(lián)長期為上千多家客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺(tái),與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為隆子企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè),隆子網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
目前,移動(dòng)跨平臺(tái)開發(fā)作為移動(dòng)開發(fā)的重要組成部分,是移動(dòng)開發(fā)者必須掌握的技能,也是自我提升的重要手段。作為Google推出的跨平臺(tái)技術(shù)方案,F(xiàn)lutter具有諸多的優(yōu)勢(shì),已經(jīng)或正在被廣大開發(fā)者應(yīng)用在移動(dòng)應(yīng)用開發(fā)中。在過去的2019年,我看到越來越多的公司和個(gè)人開始使用Flutter來開發(fā)跨平臺(tái)應(yīng)用,對(duì)于移動(dòng)應(yīng)用開發(fā)來說,F(xiàn)lutter能夠滿足幾乎所有的業(yè)務(wù)開發(fā)需求,所以,學(xué)習(xí)Flutter正當(dāng)時(shí)。
眾所周知,使用Flutter進(jìn)行項(xiàng)目開發(fā)時(shí),就免不了要加載H5頁面,在移動(dòng)開發(fā)中打開H5頁面需要使用WebView組件。同時(shí),為了和H5頁面進(jìn)行數(shù)據(jù)交換,有時(shí)候還需要借助JSBridge來實(shí)現(xiàn)客戶端與H5之間的通訊。除此之外,Hybrid開發(fā)模式也需要Webview與JS做頻繁的交互。
安裝
本文使用的是Flutter官方的webview_flutter組件,目前的最新版本是0.3.19+9。使用前需要先添加webview_flutter插件依賴,如下所示。
webview_flutter: 0.3.19+9
然后,使用flutter packages get命令將插件拉取到本地并保持依賴。由于加載WebView需要使用網(wǎng)絡(luò),所以還需要在android中添加網(wǎng)絡(luò)權(quán)限。打開目錄android/app/src/main/AndroidManifest.xml,然后添加如下代碼即可。
<uses-permission android:name="android.permission.INTERNET"/>
由于iOS在9.0版本默認(rèn)開啟了Https,所以要運(yùn)行Http的網(wǎng)頁,還需要在ios/Runner/Info.plist文件中添加如下代碼。
<key>io.flutter.embedded_views_preview</key> <string>YES</string>
基本使用
打開WebView組件的源碼,WebView組件的構(gòu)造函數(shù)如下所示。
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);
其中,比較常見的屬性的含義如下:
使用Webview加載網(wǎng)頁時(shí),很多時(shí)候需要與JS進(jìn)行交互,即JS調(diào)用Flutter和Flutter調(diào)用JS。Flutter調(diào)用JS比較簡單,直接調(diào)用 _controller.evaluateJavascript()函數(shù)即可。而JS調(diào)用Flutter則比較煩一點(diǎn),之所以比較煩,是因?yàn)閖avascriptChannels目錄只支持字符串類型,并且JS的方法是固定的,即只能使用postMessage方法,對(duì)于iOS來說沒問題,但是對(duì)于Android來說就有問題,當(dāng)然也可以通過修改源碼來實(shí)現(xiàn)。
JS調(diào)用Flutter
javascriptChannels方式
javascriptChannels方式也是推薦的方式,主要用于JS給Flutter傳遞數(shù)據(jù)。例如,有如下JS代碼。
<button onclick="callFlutter()">callFlutter</button> function callFlutter(){ Toast.postMessage("JS調(diào)用了Flutter"); }
使用postMessage方式 Toast 是定義好的名稱,在接受的時(shí)候要拿這個(gè)名字 去接收,F(xiàn)lutter端的代碼如下。
WebView( javascriptChannels: <JavascriptChannel>[ _alertJavascriptChannel(context), ].toSet(), ) JavascriptChannel _alertJavascriptChannel(BuildContext context) { return JavascriptChannel( name: 'Toast', onMessageReceived: (JavascriptMessage message) { showToast(message.message); }); }
navigationDelegate
除此之外,另一種方式是navigationDelegate,主要是加載網(wǎng)頁的時(shí)候進(jìn)行攔截,例如有下面的JS協(xié)議。
document.location = "js://webview?arg1=111&args2=222";
對(duì)應(yīng)的Flutter代碼如下。
navigationDelegate: (NavigationRequest request) { if (request.url.startsWith('js://webview')) { showToast('JS調(diào)用了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表示允許路由替換。
JSBridge
除此之外,我們還可以自己開發(fā)JSBridge,并建立一套通用規(guī)范。首先,需要與H5開發(fā)約定協(xié)議,建立Model。
class JsBridge { String method; // 方法名 Map data; // 傳遞數(shù)據(jù) Function success; // 執(zhí)行成功回調(diào) Function error; // 執(zhí)行失敗回調(diào) JsBridge(this.method, this.data, this.success, this.error); /// jsonEncode方法中會(huì)調(diào)用實(shí)體類的這個(gè)方法。如果實(shí)體類中沒有這個(gè)方法,會(huì)報(bào)錯(cuò)。 Map toJson() { Map map = new Map(); map["method"] = this.method; map["data"] = this.data; map["success"] = this.success; map["error"] = this.error; return map; } static JsBridge fromMap(Map<String, dynamic> map) { JsBridge jsonModel = new JsBridge(map['method'], map['data'], map['success'], map['error']); return jsonModel; } @override String toString() { return "JsBridge: {method: $method, data: $data, success: $success, error: $error}"; } }
然后,對(duì)接收到的H5方法進(jìn)行內(nèi)部處理。舉個(gè)例子,客戶端向H5提供了打開微信App的接口openWeChatApp,如下所示。
class JsBridgeUtil { /// 將json字符串轉(zhuǎn)化成對(duì)象 static JsBridge parseJson(String jsonStr) { JsBridge jsBridgeModel = JsBridge.fromMap(jsonDecode(jsonStr)); return jsBridgeModel; } /// 向H5開發(fā)接口調(diào)用 static executeMethod(context, JsBridge jsBridge) async{ if (jsBridge.method == 'openWeChatApp') { /// 先檢測(cè)是否已安裝微信 bool _isWechatInstalled = await fluwx.isWeChatInstalled(); if (!_isWechatInstalled) { toast.show(context, '您沒有安裝微信'); jsBridge.error?.call(); return; } fluwx.openWeChatApp(); jsBridge.success?.call(); } } }
為了讓我們封裝得WebView變得更加通用,可以對(duì)Webview進(jìn)行封裝,如下所示。
final String url; final String title; WebViewController webViewController; // 添加一個(gè)controller final PrivacyProtocolDialog privacyProtocolDialog; Webview({Key key, this.url, this.title = '', this.privacyProtocolDialog}) : super(key: key); @override WebViewState createState() => WebViewState(); } class WebViewState extends State<Webview> { bool isPhone = Adapter.isPhone(); JavascriptChannel _JsBridge(BuildContext context) => JavascriptChannel( name: 'FoxApp', // 與h6 端的一致 不然收不到消息 onMessageReceived: (JavascriptMessage msg) async{ String jsonStr = msg.message; JsBridgeUtil.executeMethod(JsBridgeUtil.parseJson(jsonStr)); }); @override Widget build(BuildContext context) { return Scaffold( 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) { // 解決切換頁面時(shí)彈框顯示異常問題 privacyProtocolDialog.show(context); } }), title: Text(widget.title), centerTitle: true, elevation: 0, ), body: StoreConnector<AppState, UserState>( converter: (store) => store.state.userState, builder: (context, userState) { return WebView( initialUrl: widget.url, userAgent:"Mozilla/5.0 FoxApp", // h6 可以通過navigator.userAgent判斷當(dāng)前環(huán)境 javascriptMode: JavascriptMode.unrestricted, // 啟用 js交互,默認(rèn)不啟用JavascriptMode.disabled javascriptChannels: <JavascriptChannel>[ _JsBridge(context) // 與h6 通信 ].toSet(), ); }), ); } }
當(dāng)JS需要調(diào)用Flutter時(shí),直接調(diào)用JsBridge即可,如下所示。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </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('<p>hello world</p>'); } </script> </body> </html>
看完上述內(nèi)容,是不是對(duì)Flutter如何使用JsBridge方式處理Webview與H5通信有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享文章:Flutter如何使用JsBridge方式處理Webview與H5通信
分享路徑:http://muchs.cn/article22/ihisjc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、全網(wǎng)營銷推廣、虛擬主機(jī)、定制開發(fā)、網(wǎng)站維護(hù)、App開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)