Flutter使用JsBridge方式處理Webview與H5通信的方法
目前，移動(dòng)跨平臺(tái)開發(fā)作為移動(dòng)開發(fā)的重要組成部分，是移動(dòng)開發(fā)者必須掌握的技能，也是自我提升的重要手段。作為Google推出的跨平臺(tái)技術(shù)方案，F(xiàn)lutter具有諸多的優(yōu)勢，已經(jīng)或正在被廣大開發(fā)者應(yīng)用在移動(dòng)應(yīng)用開發(fā)中。在過去的2019年，我看到越來越多的公司和個(gè)人開始使用Flutter來開發(fā)跨平臺(tái)應(yīng)用，對于移動(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);
其中，比較常見的屬性的含義如下：
- onWebViewCreated：在WebView創(chuàng)建完成后調(diào)用，只會(huì)被調(diào)用一次；
- initialUrl：初始load的url；
- javascriptMode：JS執(zhí)行模式（是否允許JS執(zhí)行）；
- javascriptChannels：JS和Flutter通信的Channel；
- navigationDelegate：路由委托（可以通過在此處攔截url實(shí)現(xiàn)JS調(diào)用Flutter部分）；
- gestureRecognizers：手勢監(jiān)聽；
- onPageFinished：WebView加載完畢時(shí)的回調(diào)。import 'dart:async';
使用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方法，對于iOS來說沒問題，但是對于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";
對應(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}";
}
}
然后，對接收到的H5方法進(jìn)行內(nèi)部處理。舉個(gè)例子，客戶端向H5提供了打開微信App的接口openWeChatApp，如下所示。
class JsBridgeUtil {
/// 將json字符串轉(zhuǎn)化成對象
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') {
/// 先檢測是否已安裝微信
bool _isWechatInstalled = await fluwx.isWeChatInstalled();
if (!_isWechatInstalled) {
toast.show(context, '您沒有安裝微信');
jsBridge.error?.call();
return;
}
fluwx.openWeChatApp();
jsBridge.success?.call();
}
}
}
為了讓我們封裝得WebView變得更加通用，可以對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', // 與h5 端的一致 不然收不到消息
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", // h5 可以通過navigator.userAgent判斷當(dāng)前環(huán)境
javascriptMode: JavascriptMode.unrestricted, // 啟用 js交互，默認(rèn)不啟用JavascriptMode.disabled
javascriptChannels: <JavascriptChannel>[
_JsBridge(context) // 與h5 通信
].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>
到此這篇關(guān)于Flutter使用JsBridge方式處理Webview與H5通信的方法的文章就介紹到這了,更多相關(guān)Flutter Webview與H5通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Android編程連接MongoDB及增刪改查等基本操作示例
這篇文章主要介紹了Android編程連接MongoDB及增刪改查等基本操作,簡單介紹了MongoDB功能、概念、使用方法及Android操作MongoDB數(shù)據(jù)庫的基本技巧,需要的朋友可以參考下2017-07-07
Android Studio debug.keystore位置介紹
這篇文章主要介紹了Android Studio debug.keystore位置，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03
Android 應(yīng)用的歡迎界面實(shí)現(xiàn)代碼
本文主要介紹Android 應(yīng)用歡迎界面的開發(fā),這里提供實(shí)現(xiàn)方法和實(shí)現(xiàn)代碼以供大家參考,有需要的朋友可以參考下2016-07-07
這篇文章主要介紹了Android 8.0系統(tǒng)中通知欄的適配微技巧,Android 8.0系統(tǒng)最主要需要進(jìn)行適配的地方有兩處：應(yīng)用圖標(biāo)和通知欄。具體配置方法技巧大家參考下本文2018-04-04
本篇文章主要介紹了Android 國際貨幣格式化的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
Android應(yīng)用開發(fā)的版本更新檢測升級功能實(shí)現(xiàn)示例
本文對Android版本更新的知識(shí)做全面的總結(jié)，主要包括開發(fā)中版本的設(shè)置，如何檢測本程序的版本，版本的更新判斷和顯示，新版本程序的安裝2022-04-04
最近在工作中發(fā)現(xiàn)一個(gè)問題，在做圖片瀏覽的時(shí)候發(fā)現(xiàn)超大圖圖片無法顯示，無奈只能上網(wǎng)找解決方法，后來通過測試找到了解決的方法，下面這篇文章就主要介紹了Android中超大圖無法顯示的問題解決方法，需要的朋友可以參考借鑒。2017-01-01
Android自定義控件實(shí)現(xiàn)萬能的對話框
這篇文章主要為大家詳細(xì)介紹了Android自定義控件實(shí)現(xiàn)萬能對話框的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Android帶刷新時(shí)間顯示的PullToRefresh上下拉刷新
這篇文章主要為大家詳細(xì)介紹了Android帶刷新時(shí)間顯示的PullToRefresh上下拉刷新，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
Flutter 滾動(dòng)監(jiān)聽及實(shí)戰(zhàn)appBar滾動(dòng)漸變的實(shí)現(xiàn)
這篇文章主要介紹了Flutter 滾動(dòng)監(jiān)聽及實(shí)戰(zhàn)appBar滾動(dòng)漸變，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09