1. flutter中使用WebView
WebView(
initialUrl:
"http://100.84.184.27:80/FlutterH5Demo/dist/index.html",
),
纯展示的页面，上面的配置就可以，但是要想实现Flutter和H5的双向数据交流，就需要像原生和H5之间交换数据那样，搭建一个Bridge。
flutter提供了非常方便的Api，JavascriptChannels，配置如下：
WebView(
initialUrl:
"http://100.84.184.27:80/FlutterH5Demo/dist/index.html",
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (controller) {
webViewController = controller;
},
onPageFinished: (url) {},
javascriptChannels: <JavascriptChannel>[
JavascriptChannel(
name: "FlutterBridge",
onMessageReceived: (JavascriptMessage message) {
print("js 发来消息 ${message.message}");
},
),
].toSet(),
),
JavascriptMode.unrestricted即不限制使用JavaScript，必须开启，不然channels无法使用，在javascriptChannels下可以配置一个集合，自定义需要的Channel，也即交换数据通道，这个通道用来接收H5传来的数据。
JavascriptChannel由一个name和一个回调函数组成，name即协定好的方法Api，H5那边会用到，这个name非常关键。实际开发中不需要定义多个name，一个通用的Api就可以，可以扩展传递的数据。
2. H5调用flutter中的方法（即H5传递数据给Flutter）
先看H5中的代码：
<body>
<p id="pid">Js的content</p>
<script>
window.android2Js = function (data) {
document.getElementById("pid").innerText = "flutter 发来消息" + data;
};
document.getElementById("pid").addEventListener("click", function () {
FlutterBridge.postMessage("来自JS的数据");
});
</script>
</body>
p展示H5内容，script中定义了一个window的方法android2Js，用于从Flutter中接收数据，p标签的点击事件触发向Flutter传递数据。
在Flutter中定义的name，这个时候就用上了，Flutter会在webview中注入js方法postMessage，直接调用Api.postMessage，参数只接收一个String，就可以向Flutter发送数据，Flutter的回调函数就可以接收到这个数据String。
3. Flutter调用H5中的方法（即Flutter传递数据给H5）
GestureDetector(
onTap: () {
webViewController.evaluateJavascript(
"android2Js('来自flutter的消息');");
},
child: Text(
title,
style: TextStyle(
color: COLOR_333333,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
和原生中调用H5的方法类似，直接获取webview的控制器，执行js代码，android2Js，传递参数类型String。
4. 一个JavascriptChannel，扩展传递的数据
以上就完成了数据的交换，但是存在一个问题，如果两个按钮都调用同一个方法，无法判断执行回调的先后，导致数据错乱，所以需要给每一次调起分配一个id，简单点时间戳就可以。
{
"pluginName": "",
"data": {
},
"callbackId": Date.now(),
}
调用方和执行方都需要严格保持这样的数据类型，【pluginName指定调用的插件类型，data指定业务参数，callbackId唯一标识一次调用】，才能保证方法调用不会混乱。
调用方需要维持一个callbackId和回调函数的映射表，执行方在拿到callbackId的时候，执行完成需要将这个callbackId传回调用方，调用方收到消息，需要从映射表中取出回调函数，执行回调，完成一次完整调用。
举例说明：
{
"pluginName": "addBroadcast",
"data": {
"param1": 100,
"param2": 200,
},
"callbackId": 1630329836113,
}
{
"pluginName": "addBroadcast",
"data": {
"param1": 100,
"param2": 200,
},
"callbackId": 1630329836114,
}
映射表：
1630329836113 -> 回调函数1
1630329836114 -> 回调函数2
{
"pluginName": "addBroadcast",
"data": {
"param1": 100,
"param2": 200,
},
"callbackId": 1630329836113,
}
{
"pluginName": "addBroadcast",
"data": {
"param1": 100,
"param2": 200,
},
"callbackId": 1630329836114,
}
{
"pluginName": "addPlugin",
"data": {
"result": 300,
},
"callbackId": 1630329836113,
}
{
"pluginName": "addPlugin",
"data": {
"result": 300,
},
"callbackId": 1630329836114,
}
{
"pluginName": "addPlugin",
"data": {
"result": 300,
},
"callbackId": 1630329836113,
}
{
"pluginName": "addPlugin",
"data": {
"result": 300,
},
"callbackId": 1630329836114,
}
1630329836113查找映射表得到回调函数1，执行回调方法；
1630329836114查找映射表得到回调函数2，执行回调方法。
至此，flutter和H5的互相回调结束。【方便理解，flutter和H5的pluginName，一方叫广播Broadcast，一方叫插件Plugin，和现有业务融合】
1630330541(1).jpg
img.png
img_1.png
网友评论