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

然后，使用flutter packages get命令將插件拉取到本地並保持依賴。由於加載WebView需要使用網絡，所以還需要在android中添加網絡權限。打開目錄android/app/src/main/AndroidManifest.xml，然后添加如下代碼即可。

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

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

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

 

基本使用

打開WebView組件的源碼，WebView組件的構造函數如下所示。

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創建完成后調用，只會被調用一次；
• 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代碼。

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

使用postMessage方式 Toast 是定義好的名稱，在接受的時候要拿這個名字 去接收，Flutter端的代碼如下。

WebView(
     javascriptChannels: <JavascriptChannel>[ 
        _alertJavascriptChannel(context),
   ].toSet(),
)

JavascriptChannel _alertJavascriptChannel(BuildContext context) {
  return JavascriptChannel( name: 'Toast', onMessageReceived: (JavascriptMessage message) { showToast(message.message); }); } 

navigationDelegate

除此之外，另一種方式是navigationDelegate，主要是加載網頁的時候進行攔截，例如有下面的JS協議。

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

vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com

JSBridge

除此之外，我們還可以自己開發JSBridge，並建立一套通用規范。首先，需要與H5開發約定協議，建立Model。

class JsBridge { String method; // 方法名 Map data; // 傳遞數據 Function success; // 執行成功回調 Function error; // 執行失敗回調 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開發接口調用 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判斷當前環境 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>