本文使用的是Flutter官方的webview_flutter組件，對Flutter與h5常用交互進行總結。

一、JS向Flutter傳遞數據

1、通過URL方式

H5代碼如下，傳遞參數key是“name”，值是camera。

   btn.addEventListener('click', function () {
        //通過URL向flutter傳遞參數
        document.location = "cwq://webview?name=camera";
   }, false)

Flutter代碼如下，通過解析url，取出name對應的值。

  controller = WebViewController()
      //開啟JS執(zhí)行
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
         NavigationDelegate(onNavigationRequest: (NavigationRequest request) {
        //約定一個通信協(xié)議 cwq://webview
        if (request.url.startsWith("cwq://webview")) {
          debugPrint('處理JS通過URL傳遞過來的數據： $request');
          Uri uri = Uri.parse(request.url);
          //解析數據
          var name = uri.queryParameters['name'];
          debugPrint('name:$name');
          ScaffoldMessenger.of(context)
              .showSnackBar(SnackBar(content: Text('name:$name')));
          return NavigationDecision.prevent; //不跳轉；
        }
        debugPrint('非cwq://webview開頭的URL則放行 $request');
        return NavigationDecision.navigate;
      }));

2、通過JavaScriptChannels方式

H5代碼如下，傳遞參數key是“updateDevice”，值是id123456。

 btn.addEventListener('click', function () {
     //通過注冊的updateDevice channel向flutter發(fā)送消息
     updateDevice.postMessage("id123456");
 }, false)

Flutter代碼如下，通過監(jiān)聽updateDevice Channel，取出對應的值。

controller = WebViewController()
      //開啟JS執(zhí)行
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..addJavaScriptChannel('updateDevice',
          onMessageReceived: (JavaScriptMessage message) {
        ScaffoldMessenger.of(context)
            .showSnackBar(SnackBar(content: Text(message.message)));
       });

一、Flutter 向JS傳遞數據

1、通過URL方式

Flutter代碼，在加載的url后面添加參數即可，如：

controller.loadRequest(Uri.parse(
            'https://www.cwq.com/devices/Flutter2JSByUrl.html?name=device123'));

2、通過runJavaScript方式

Flutter代碼，runJavaScript調用cwqCallJs、cwqCallJsWithResult

var name = 'wqdev';
controller.runJavaScript("cwqCallJs('$name')"); //這里$name前后需要帶''，否則格式檢測不通過
var result = await controller.runJavaScriptReturningResult("cwqCallJsWithResult(2,2)");
debugPrint('來在JS的計算結果：$result');

H5代碼

<script type="text/javascript">
    function cwqCallJs(msg) {
       document.getElementById('resultTxt').innerHTML = 'Flutter傳遞過來的數據：' + msg;
    }
    function cwqCallJsWithResult(v1, v2) {
      return parseInt(v1) + parseInt(v2);
    }
</script>