flutter 与H5交互

主要是flutter内嵌H5页面，之后就是两者之间的交互

  flutter：webview_flutter 4.2.2

  H5： uniapp

1、flutter向H5传参

//在flutter 中的web页面，可在onPageFinished中向H5进行传参
 
onPageFinished: (String url) async {
 WebViewController.runJavaScript("window.postMessage({ type: 'sendDataToH5', data: 'Hello H5!'   })");
},
 
 
//H5端接收参数，可在mounted中声明使用
 
 window.addEventListener('message', (event) => {
     console.log('Received data from Flutter:',JSON.stringify(event.data));
       
 });

2、H5向flutter传参

//在flutter 的web页面，创建一个新的JS交互通道即可接受H5传递的参数
 
@override
void initState() {
  super.initState();
    ..addJavaScriptChannel(
      'Toaster',
      onMessageReceived: (JavaScriptMessage message) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text(message.message)),
        );
        /可对H5传递的数据进行操作
      },
    )
} 
 
 
 
 
//H5向flutter传递参数，在需要传递的位置增加此方法即可
 
Toaster.postMessage('Hello Flutter!');