主要是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!');