柚子快報(bào)邀請(qǐng)碼778899分享：flutter 與H5交互

http://yzkb.51969.com/

主要是flutter內(nèi)嵌H5頁(yè)面，之后就是兩者之間的交互

??flutter：webview_flutter 4.2.2

??H5： uniapp

1、flutter向H5傳參

//在flutter 中的web頁(yè)面，可在onPageFinished中向H5進(jìn)行傳參

onPageFinished: (String url) async {

WebViewController.runJavaScript("window.postMessage({ type: 'sendDataToH5', data: 'Hello H5!' })");

},

//H5端接收參數(shù)，可在mounted中聲明使用

window.addEventListener('message', (event) => {

console.log('Received data from Flutter:',JSON.stringify(event.data));

});

2、H5向flutter傳參

//在flutter 的web頁(yè)面，創(chuàng)建一個(gè)新的JS交互通道即可接受H5傳遞的參數(shù)

@override

void initState() {

super.initState();

..addJavaScriptChannel(

'Toaster',

onMessageReceived: (JavaScriptMessage message) {

ScaffoldMessenger.of(context).showSnackBar(

SnackBar(content: Text(message.message)),

);

/可對(duì)H5傳遞的數(shù)據(jù)進(jìn)行操作

},

)

}

//H5向flutter傳遞參數(shù)，在需要傳遞的位置增加此方法即可

Toaster.postMessage('Hello Flutter!');

柚子快報(bào)邀請(qǐng)碼778899分享：flutter 與H5交互

http://yzkb.51969.com/

好文推薦