通过webview 进行flutter 和js 的互调,页面可以放在其他网站 也可以放在本地,我这里放在本地进行测试。
1.引入webview_flutter: ^0.3.5+2 这个是官网推荐用的, 还有一个好像api 里没有互调的操作。
-
onWebViewCreated:在WebView创建完成后调用,只会被调用一次; -
initialUrl:初始load的url; -
javascriptMode:JS执行模式(是否允许JS执行); -
javascriptChannels:JS和Flutter通信的Channel; -
navigationDelegate:路由委托(可以通过在此处拦截url实现JS调用Flutter部分); -
gestureRecognizers:手势监听; -
onPageFinished:WebView加载完毕时的回调。import 'dart:async';
js 调用flutter 有俩种方式
1.使用javascriptChannels
js部分:
<button onclick="callFlutter()">callFlutter</button>
function callFlutter(){
Toast.postMessage("JS调用了Flutter"); // 使用postMessage toast 是定义好的名称,在接受的时候要拿这个name 去接受
}
flutter部分:
javascriptChannels: <JavascriptChannel>[ //javascriptChannels这个是api提供的互调的方法,
_alertJavascriptChannel(context),
].toSet(),
JavascriptChannel _alertJavascriptChannel(BuildContext context) {
return JavascriptChannel(
name: 'Toast',
onMessageReceived: (JavascriptMessage message) {
showToast(message.message);
});
}
第二种方法:通过navigationDelegate拦截url
document.location = "js://webview?arg1=111&args2=222"; 通过跳转链接 js:/webview 这个定义好之后
navigationDelegate: (NavigationRequest request) {
if (request.url.startsWith('js://webview')) { //拦截以js://webview 开始的链接 说明页面执行了这个链接的跳转操作,也就是页面按钮被点击了。那么执行相关的flutter操作。
showToast('JS调用了Flutter By navigationDelegate');
print('blocking navigation to $request}');
Navigator.push(context,
new MaterialPageRoute(builder: (context) => new testNav()));
return NavigationDecision.prevent;
}
print('allowing navigation to $request');
return NavigationDecision.navigate; //这个是必须有的,NavigationDecision.prevent:阻止路由替换;NavigationDecision.navigate:允许路由替换。
},
flutter调用js:
_controller.future.then((controller) {
controller print(result);