Flutter處理Webview與H5通訊的常見方式

xiangzhihong發表於2020-04-04
FlutterWebViewH5

目前，移動跨平臺開發作為移動開發的重要組成部分，是移動開發者必須掌握的技能，也是自我提升的重要手段。作為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>
複製程式碼

如果接入過程中遇到其他問題，可以文末留言！

相關文章