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

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>

若是接入過程當中遇到其餘問題，能夠文末留言！