Flutter与JS相互调用
2022-03-16 本文已影响0人
neobuger
1.依赖webview
webview_flutter: ^3.0.1
2.导入头文件
import 'package:webview_flutter/webview_flutter.dart';
3.创建webview
WebView(
initialUrl: "",
//widget.url ?? "https://www.baidu.com",
//JS执行模式 是否允许JS执行
javascriptMode: JavascriptMode.unrestricted,
//webview创建好
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("参数： ${message.message}");
Map res = changeStringToJsonMap(message.message);
print(res["operation"]);
// _controller?.evaluateJavascript("getAddressBook('sdad')");
}
),
JavascriptChannel(
name: "MessageDeal",
onMessageReceived: (JavascriptMessage message) {
print("交互");
print("参数： ${message.message}");
print(_controller);
_controller?.evaluateJavascript(
"showMessage('我（Flutter）收到了你的消息)");
// _controller?.evaluateJavascript("document.title");
}
),
JavascriptChannel(
name: "callWithDict",
onMessageReceived: (JavascriptMessage message) {
print("交互");
print("参数： ${message.message}");
}
),
].toSet(),
),
3.1 flutte 调用 js 关键代码
onPageFinished: (String url) {
//加载完成 移除导航栏
_controller?.runJavascript("getAddressBook('你们好')");
},
老的evaluateJavascriptrunJavascript 或者 runJavascriptReturningResult
其中getAddressBook是js里的方法
3.2 js 调用flutter
JavascriptChannel(
name: "MessageDeal",
onMessageReceived: (JavascriptMessage message) {
print("交互");
print("参数： ${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>
