本文使用的是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>
