主要是flutter内嵌H5页面,之后就是两者之间的交互
flutter:webview_flutter 4.2.2
H5: uniapp
1、flutter向H5传参文章来源:https://www.toymoban.com/news/detail-715078.html
//在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传参文章来源地址https://www.toymoban.com/news/detail-715078.html
//在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!');
到了这里,关于flutter 与H5交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!