1.依賴webview
webview_flutter: ^3.0.1
2.導入頭文件
import 'package:webview_flutter/webview_flutter.dart';
3.創(chuàng)建webview
WebView(
initialUrl: "",
//widget.url ?? "https://www.baidu.com",
//JS執(zhí)行模式 是否允許JS執(zhí)行
javascriptMode: JavascriptMode.unrestricted,
//webview創(chuàng)建好
onWebViewCreated: (controller) {
_controller = controller;
_loadHtmlStr();
},
onPageFinished: (String url) {
//加載完成 移除導航欄
_controller?.runJavascript("getAddressBook('你們好')");
setState(() {
if (widget.url == null) {
// this.showAppBar = false;
}
});
},
javascriptChannels: <JavascriptChannel>[
JavascriptChannel(
name: "integral",
onMessageReceived: (JavascriptMessage message) {
print("交互");
print("參數(shù)： ${message.message}");
Map res = changeStringToJsonMap(message.message);
print(res["operation"]);
// _controller?.evaluateJavascript("getAddressBook('sdad')");
}
),
JavascriptChannel(
name: "MessageDeal",
onMessageReceived: (JavascriptMessage message) {
print("交互");
print("參數(shù)： ${message.message}");
print(_controller);
_controller?.evaluateJavascript(
"showMessage('我（Flutter）收到了你的消息)");
// _controller?.evaluateJavascript("document.title");
}
),
JavascriptChannel(
name: "callWithDict",
onMessageReceived: (JavascriptMessage message) {
print("交互");
print("參數(shù)： ${message.message}");
}
),
].toSet(),
),
changeStringToJsonMap(String jsonStr) {
Map<String, dynamic> result = convert.jsonDecode(jsonStr);
return result;
}
3.1 flutte 調(diào)用 js 關(guān)鍵代碼
onPageFinished: (String url) {
//加載完成 移除導航欄
_controller?.runJavascript("getAddressBook('你們好')");
},
老的evaluateJavascriptrunJavascript 或者 runJavascriptReturningResult
其中getAddressBook是js里的方法
3.2 js 調(diào)用flutter
JavascriptChannel(
name: "MessageDeal",
onMessageReceived: (JavascriptMessage message) {
print("交互");
print("參數(shù)： ${message.message}");
print(_controller);
}
),
附一個 html 練習
<!DOCTYPE html>
<html>
<title>23</title>
<head>
<meta charset="UTF-8">
</head>
<body>
<div style="margin-top: 20px">
<h2 id="aaaa">JS與OC交互</h2>
<input type="button" value="喚起本地方法(call)" id="dsadadd" onclick="fun('ewqeeqw')" >
</div>
<div>
<input type="button" value="喚起getCall:(NSString *)callString傳值" >
</div>
<script>
function fun(data){
document.getElementById('aaaa').innerHTML=data
window.webkit.messageHandlers.integral.postMessage(JSON.stringify({ operation: '分享' }))
}
window['getAddressBook'] = (data) => {
<!-- window.webkit.messageHandlers.integral.postMessage(JSON.stringify({ operation: '分享2' }))-->
document.getElementById('aaaa').innerHTML=data
}
</script>
</body>
</html>
