欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Flutter使用JsBridge方式處理Webview與H5通信的方法

 更新時間：2020年04月10日 10:52:48   作者：xiangzhihong  
這篇文章主要介紹了Flutter使用JsBridge方式處理Webview與H5通信的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

目前，移動跨平臺開發(fā)作為移動開發(fā)的重要組成部分，是移動開發(fā)者必須掌握的技能，也是自我提升的重要手段。作為Google推出的跨平臺技術方案，F(xiàn)lutter具有諸多的優(yōu)勢，已經或正在被廣大開發(fā)者應用在移動應用開發(fā)中。在過去的2019年，我看到越來越多的公司和個人開始使用Flutter來開發(fā)跨平臺應用，對于移動應用開發(fā)來說，F(xiàn)lutter能夠滿足幾乎所有的業(yè)務開發(fā)需求，所以，學習Flutter正當時。

眾所周知，使用Flutter進行項目開發(fā)時，就免不了要加載H5頁面，在移動開發(fā)中打開H5頁面需要使用WebView組件。同時，為了和H5頁面進行數(shù)據(jù)交換，有時候還需要借助JSBridge來實現(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)絡，所以還需要在android中添加網(wǎng)絡權限。打開目錄android/app/src/main/AndroidManifest.xml，然后添加如下代碼即可。

<uses-permission android:name="android.permission.INTERNET"/>

由于iOS在9.0版本默認開啟了Https，所以要運行Http的網(wǎng)頁，還需要在ios/Runner/Info.plist文件中添加如下代碼。

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>

基本使用

打開WebView組件的源碼，WebView組件的構造函數(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)建完成后調用，只會被調用一次；
  • initialUrl：初始load的url；
  • javascriptMode：JS執(zhí)行模式（是否允許JS執(zhí)行）；
  • javascriptChannels：JS和Flutter通信的Channel；
  • navigationDelegate：路由委托（可以通過在此處攔截url實現(xiàn)JS調用Flutter部分）；
  • gestureRecognizers：手勢監(jiān)聽；
  • onPageFinished：WebView加載完畢時的回調。import 'dart:async';

使用Webview加載網(wǎng)頁時，很多時候需要與JS進行交互，即JS調用Flutter和Flutter調用JS。Flutter調用JS比較簡單，直接調用 _controller.evaluateJavascript()函數(shù)即可。而JS調用Flutter則比較煩一點，之所以比較煩，是因為javascriptChannels目錄只支持字符串類型，并且JS的方法是固定的，即只能使用postMessage方法，對于iOS來說沒問題，但是對于Android來說就有問題，當然也可以通過修改源碼來實現(xiàn)。

JS調用Flutter

javascriptChannels方式

javascriptChannels方式也是推薦的方式，主要用于JS給Flutter傳遞數(shù)據(jù)。例如，有如下JS代碼。

<button onclick="callFlutter()">callFlutter</button>
function callFlutter(){
 Toast.postMessage("JS調用了Flutter"); 
}

使用postMessage方式 Toast 是定義好的名稱，在接受的時候要拿這個名字 去接收，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)頁的時候進行攔截，例如有下面的JS協(xié)議。

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表示允許路由替換。

JSBridge

除此之外，我們還可以自己開發(fā)JSBridge，并建立一套通用規(guī)范。首先，需要與H5開發(fā)約定協(xié)議，建立Model。

class JsBridge {
 String method; // 方法名
 Map data; // 傳遞數(shù)據(jù)
 Function success; // 執(zhí)行成功回調
 Function error; // 執(zhí)行失敗回調

 JsBridge(this.method, this.data, this.success, this.error);

 /// jsonEncode方法中會調用實體類的這個方法。如果實體類中沒有這個方法，會報錯。
 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方法進行內部處理。舉個例子，客戶端向H5提供了打開微信App的接口openWeChatApp，如下所示。

class JsBridgeUtil {
 /// 將json字符串轉化成對象
 static JsBridge parseJson(String jsonStr) {
 JsBridge jsBridgeModel = JsBridge.fromMap(jsonDecode(jsonStr));
 return jsBridgeModel;
 }

 /// 向H5開發(fā)接口調用
 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進行封裝，如下所示。

 final String url;
 final String title;
 WebViewController webViewController; // 添加一個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) { // 解決切換頁面時彈框顯示異常問題
    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判斷當前環(huán)境
    javascriptMode: JavascriptMode.unrestricted, // 啟用 js交互，默認不啟用JavascriptMode.disabled
    javascriptChannels: <JavascriptChannel>[
    _JsBridge(context) // 與h5 通信
    ].toSet(),
   );
   }),

 );
 }
}

當JS需要調用Flutter時，直接調用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>

到此這篇關于Flutter使用JsBridge方式處理Webview與H5通信的方法的文章就介紹到這了,更多相關Flutter Webview與H5通信內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論