本文使用的是Flutter官方的webview_flutter组件,对Flutter与h5同步登录态的两种方式介绍。
一、使用cookie的方式
H5代码如下,通过document.cookie获取cookie。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>Flutter向H5传递数据-通过URL</title>
</head>
<body>
<button id="btn" style="font-size: 2.5em">获取数据</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中的数据
var btn = document.getElementById("btn");
btn.addEventListener('click', function () {
//通过URL向H5传递数据
const params = new URLSearchParams(window.location.search);
var name = params.get('name');
document.getElementById('resultTxt').innerHTML = '从URL中获取到的数据:' + name;
}, false)
</script>
</body>
</html>
Flutter代码如下,设置cookie的值,用于在H5获取。
///设置cookie
void _onSetCookie(BuildContext context) async {
//可以连续设置多次cookie
await cookieManager.setCookie(const WebViewCookie(
name: 'token', //cookie的名字
value: 'asssdddfff', //cookie的值
domain: 'cwq.com', //指定给对应的域名设置cookie
path: '/', //域名下的路径,可以缺省,若设置一个具体的path,那么只有这个path下的网址才可以获取到设置的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 () {
//通过注册的getLoginInfo channel向flutter发送消息
getLoginInfo.postMessage("");
}, false)
function cwqCallJs(msg) {
document.getElementById('resultTxt').innerHTML = 'Flutter传递过来的登录信息:' + msg;
}
</script>
Flutter代码,通过addJavaScriptChannel添加Channel监听,并通过runJavaScript返回给H5
controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..addJavaScriptChannel('getLoginInfo',
onMessageReceived: (JavaScriptMessage message) {
//获取到H5需要登录信息的调用
var info = {'token': "qwwejdsfd", 'uid': "3233"};
var infoString = json.encode(info);
controller.runJavaScript("cwqCallJs('$infoString')"); //将登录信息传递个H5
});