前言
前文中介绍了，如何在flutter中打开本地的html文件；但是我们又如何让js与原生交互呢？
一、JS调用原生方法
通过JavascriptChannel，js可调用原生的方法；
1. 原生注册JavascriptChannel
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('h5页面'),
),
body: WebView(
initialUrl: '',
javascriptMode: JavascriptMode.unrestricted,
// javascriptChannels中包含了一系列的JavascriptChannel对象
javascriptChannels: <JavascriptChannel>[createAlertChannel()].toSet(),
onWebViewCreated: (WebViewController controller) {
this.controller = controller;
_loadHtmlFromAssets();
},
),
);
}
// 创建一个JavascriptChannel对象
createAlertChannel() {
return JavascriptChannel(
// name是该JavascriptChannel的名字
name: 'Test',
onMessageReceived: (JavascriptMessage message) {
// js调用原生的时候，传递的参数
print(message.message);
});
}
2. js调用原生的方法
调用原生方法：Test.postMessage("JS调用了Flutter");
Test是原生注册的JavascriptChannel的名字
<body>
<div class="mui-content">
<div class="about-us">
<div class="info">
<div class="display-box center height-25" id="rTime"></div>
<div class="display-box center height-25" onclick="callPhone()">
咨询电话：12316
</div>
</div>
</div>
</div>
<script>
function callPhone(){
// 调用原生的方法，其中Test是原生注册的JavascriptChannel的名字
Test.postMessage("JS调用了Flutter");
}
</script>
</body>
二、原生调用js方法
1. 使用evaluateJavascript可直接调用js的方法
controller.evaluateJavascript('callJS("visible")').then((value){
// js方法的返回值
print(value);
});
此处的
controller是WebViewController对象
evaluateJavascript的参数是一个字符串，其实就是一段js的代码拼成的字符串；
2. 在js端注册方法
<script>
// 直接在script中，写好一个js方法，原生在调用的时候，可以直接使用哪个；
function callJS(message){
// return返回返回值，原生可接收到
return 'aaa';
}
</script>
网友评论