本文使用的是Flutter官方的webview_flutter組件，對(duì)Flutter與h5同步登錄態(tài)的兩種方式介紹。
一、使用cookie的方式
H5代碼如下，通過document.cookie獲取cookie。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>Flutter向H5傳遞數(shù)據(jù)-通過URL</title>
</head>
<body>
<button id="btn" style="font-size: 2.5em">獲取數(shù)據(jù)</button>
<button id="btnGetCookie" style="font-size: 2.5em">獲取cookie</button>
<div id="resultTxt" style="font-size: 2.5em"></button>
<script type="text/javascript">
//獲取cookie
var btnGetCookie = document.getElementById("btnGetCookie");
btnGetCookie.addEventListener('click', function () {
var cookie = document.cookie;
document.getElementById('resultTxt').innerHTML = '獲取到的cookie:' + cookie;
}, false)
//獲取URL中的數(shù)據(jù)
var btn = document.getElementById("btn");
btn.addEventListener('click', function () {
//通過URL向H5傳遞數(shù)據(jù)
const params = new URLSearchParams(window.location.search);
var name = params.get('name');
document.getElementById('resultTxt').innerHTML = '從URL中獲取到的數(shù)據(jù):' + name;
}, false)
</script>
</body>
</html>
Flutter代碼如下，設(shè)置cookie的值，用于在H5獲取。
///設(shè)置cookie
void _onSetCookie(BuildContext context) async {
//可以連續(xù)設(shè)置多次cookie
await cookieManager.setCookie(const WebViewCookie(
name: 'token', //cookie的名字
value: 'asssdddfff', //cookie的值
domain: 'cwq.com', //指定給對(duì)應(yīng)的域名設(shè)置cookie
path: '/', //域名下的路徑，可以缺省，若設(shè)置一個(gè)具體的path，那么只有這個(gè)path下的網(wǎng)址才可以獲取到設(shè)置的cookie
));
//也可在Flutter中獲取cookie
final Object cookies =
await controller.runJavaScriptReturningResult('document.cookie');
debugPrint(cookies.toString());
}
一、通Channel的方式
H5代碼，
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.addEventListener('click', function () {
//通過注冊(cè)的getLoginInfo channel向flutter發(fā)送消息
getLoginInfo.postMessage("");
}, false)
function cwqCallJs(msg) {
document.getElementById('resultTxt').innerHTML = 'Flutter傳遞過來的登錄信息：' + msg;
}
</script>
Flutter代碼，通過addJavaScriptChannel添加Channel監(jiān)聽，并通過runJavaScript返回給H5
controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..addJavaScriptChannel('getLoginInfo',
onMessageReceived: (JavaScriptMessage message) {
//獲取到H5需要登錄信息的調(diào)用
var info = {'token': "qwwejdsfd", 'uid': "3233"};
var infoString = json.encode(info);
controller.runJavaScript("cwqCallJs('$infoString')"); //將登錄信息傳遞個(gè)H5
});
