本文使用的是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执行
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
         NavigationDelegate(onNavigationRequest: (NavigationRequest request) {
        //约定一个通信协议 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发送消息
     updateDevice.postMessage("id123456");
 }, false)

Flutter代码如下，通过监听updateDevice Channel，取出对应的值。

controller = WebViewController()
      //开启JS执行
      ..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>