1、导入库
webview_flutter
2、iOS 单独设置
ios/Runner/Info.plist中添加
<key>io.flutter.embedded_views_preview</key>
<string>YES</string>*
3、Flutter webview的使用
child: WebView(
key: key,
javascriptMode: JavascriptMode.unrestricted,
initialUrl: widget.url,
onWebViewCreated: (controller) {
_controller = controller;
},
navigationDelegate: (NavigationRequest request) {
var url = request.url;
setState(() {
isLoading = true; // 开始访问页面,更新状态
});
return NavigationDecision.navigate;
},
onPageFinished: (url) {
_controller.evaluateJavascript("document.title").then((result){
setState(() {
_title = result;
isLoading = false; // 页面加载完成,更新状态
print("finish");
});
}
);
},
javascriptChannels: <JavascriptChannel>[
JavascriptChannel(
name: "close",
onMessageReceived: (JavascriptMessage message) {
ATJump.jumpToInvitation();
}),
].toSet(),
),
javascriptMode: JavascriptMode.unrestricted:允许和js交互
4、Flutter 调用JS的方法
4.1、flutter端代码实现
_controller.evaluateJavascript("flutterCallJsMethod('message from Flutter!')”);
4.2、JS端代码实现
function flutterCallJsMethod(message) {
document.write(message);
}
5、JS 调用Flutter
5.1、flutter端代码实现
javascriptChannels: <JavascriptChannel>[
JavascriptChannel(
name: "close",
onMessageReceived: (JavascriptMessage message) {
print("========================================= ");
print(message.message);
appClose();
}),
].toSet(),
5.2、JS端安卓设备实现
//安卓方式 JS调用原生
close.postMessage({"key1":"100","key2":"200"});
5.3、JS端iOS设备实现
//wkWebView JS调用iOS原生
window.webkit.messageHandlers.close.postMessage({"key1":"100","key2":"200"});
//UIWebView JS调用iOS原生
<!-- close({"key1":"100","key2":"200"});-->