详解Flutter WebView与JS互相调用简易指南
50 浏览量
2021-01-04
14:01:21
上传
评论
收藏 74KB PDF 举报
详解详解Flutter WebView与与JS互相调用简易指南互相调用简易指南
本文采用Flutter官方WebView插件：https://pub.dartlang.org/packages/webview_flutter
WebView与JS互相调用是一个刚需，但是貌似现在大家写的文章讲的都不是很清楚，我这个简易指南简单粗暴地分为两部
分：JS调用Flutter和Flutter调用JS，拒绝花里胡哨，保证一看就懂，一学就会。
开始之前先简单了解一下官方WebView所包含的API：
onWebViewCreated：在WebView创建完成后调用，只会被调用一次；
initialUrl：初始load的url；
javascriptMode：JS执行模式（是否允许JS执行）；
javascriptChannels：JS和Flutter通信的Channel；
navigationDelegate：路由委托（可以通过在此处拦截url实现JS调用Flutter部分）；
gestureRecognizers：手势监听；
onPageFinished：WebView加载完毕时的回调。
JS调用调用Flutter
JS调用Flutter有两种方法：使用javascriptChannels发送消息和使用路由委托（navigationDelegate）拦截url。
方法1：使用javascriptChannels发送消息
javascriptChannels参数可以传入一组Channels，我们可以定义一个_alertJavascriptChannel变量，这个channel用来控制JS
调用Flutter的toast功能：
JavascriptChannel _alertJavascriptChannel(BuildContext context) {
return JavascriptChannel(
name: 'Toast',
onMessageReceived: (JavascriptMessage message) {
showToast(message.message);
});
}
WebView(
avascriptChannels: <JavascriptChannel>[
_alertJavascriptChannel(context),
].toSet(),
;
在上面的代码中，我们定义了一个_alertJavascriptChannel变量，并给它起了个name叫Toast，这个name属性接收的是一个
字符串，它代表了JS调用Flutter时，双方共同商定好了的一个协议，JS通过这个name去post对应的信息给Flutter（API为
name.postMessage(‘xxxxxx’)）。我们在网页部分写一个简单的button，点击后开始JS调用Flutter的逻辑：
<button onclick="callFlutter()">callFlutter</button>
function callFlutter(){
Toast.postMessage("JS调用了Flutter");
}
onMessageReceived为Flutter接收到了JS的消息之后的回调，我们可以通过message.message来获取JS发给我们的消息内
容。JavascriptMessage类暂时只有一个String类型的message成员变量，所以如果需要传递复杂数据，可以通过传递json字
符串来解决。
代码重点：JavascriptChannel中的name要与JS中的name.postMessage()相对应！！
方法方法2：使用路由委托：使用路由委托navigationDelegate拦截拦截url
navigationDelegate回调在每次网页路由地址发生变化的时候都会触发，因此我们可以拦截特定的url来实现JS调用Flutter。
同样的，我们在网页部分写一个简单的button，点击后跳转路由”js://webview?arg1=111&args2=222″。我们可以和客户端协商
好一个scheme，比如这个例子里面就是js://webview，我们可以在query string上带上我们想要传递的参数：
<button onclick="callFlutter()">callFlutter</button>
function callFlutter(){
/*约定的url协议为：js://webview?arg1=111&arg2=222*/
document.location = "js://webview?arg1=111&args2=222";
}
评论0
最新资源