使用方法
在pubspec.yaml添加依赖
dependencies:
flutter:
sdk: flutter
webview_flutter: 0.3.21
基本使用
WebView(
onWebViewCreated: (WebViewController webViewController) {
controller = webViewController;
_controller.complete(webViewController);
},
javascriptChannels:[_jsChannel(viewService.context)].toSet() ,
// initialUrl: 'data:text/html;base64,${base64Encode(const Utf8Encoder().convert(htmlString))}', //加载本地html
initialUrl: url,
javascriptMode: JavascriptMode.unrestricted,
onPageStarted: (url){
//开始网页加载,打开加载条
},
onPageFinished: (url){
//完成网页加载,关闭加载条
},
gestureNavigationEnabled: true,
)
js发消息给Flutter
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./build/calendar.css">
<style>
.btn{
background: #f00;color:#fff
}
</style>
</head>
<body style="background:#ddd;">
<div style="text-align: center">
<button id="button" onclick="send()">发送数据到react native</button>
<p style="text-align: center">收到react native发送的数据: <span id="data"></span></p>
</div>
</body>
<script>
function send () {
appobject.postMessage("msg from js");
}
function flutterCallJsMethod(message) {
document.getElementById("data").innerText = message;
}
</script>
</html>
//Flutter 接收
JavascriptChannel _jsChannel(BuildContext context) => JavascriptChannel(
name: 'appobject',
onMessageReceived: (JavascriptMessage message) {
print("前端交互: ${message.message}");
});
注意name一定要和HTML【postMessage】前面对应上
Flutter发消息给js
controller.evaluateJavascript('flutterCallJsMethod("msg from flutter")');
结合着上面代码看 【flutterCallJsMethod一定要对应上】,接受方法可以在html片段里面看