详解Flutter WebView与JS互相调用简易指南
本文采用flutter官方webview插件：
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";
}
在flutter端，我们就可以在navigationdelegate回调中拦截这个符合js://webviewscheme的路由地址了：
navigationdelegate: (navigationrequest request) {
if (request.url.startswith('js://webview')) {
showtoast('js调用了flutter by navigationdelegate');
print('blocking navigation to $request}');
return navigationdecision.prevent;
}
print('allowing navigation to $request');
return navigationdecision.navigate;
},
我们通过return不同的值，告诉webview怎么处理这个路由：
- navigationdecision.prevent：阻止路由替换；
- navigationdecision.navigate：允许路由替换。
flutter调用js
在webview创建完成之后，我们可以拿到一个webviewcontroller，通过它的evaluatejavascript()方法，我们可以执行js语句：
onwebviewcreated: (webviewcontroller webviewcontroller) {
_controller = webviewcontroller;
},
······
floatingactionbutton: floatingactionbutton(
onpressed: () {
_controller
?.evaluatejavascript('calljs("visible")')
?.then((result) {
// you can handle js result here.
});
},
child: text('call js'),
),
<p id="p1" style="visibility:hidden;">
flutter 调用了 js.
flutter 调用了 js.
flutter 调用了 js.
</p>
function calljs(message){
document.getelementbyid("p1").style.visibility = message;
}
在上面的例子中，我们点击floatingactionbutton后，就会去执行js中的calljs()方法了，具体ui体现为：将隐藏的段落重新显示。evaluatejavascript()返回值是一个future，因此我们可以接收js给我们的返回值，返回值格式请阅读官方api注释。
这里要注意的是，evaluatejavascript()方法，flutter建议我们在onpagefinished回调之后去执行，以保证所有的html都已经加载完毕了。因此在实际开发中，我这里展示的这种直接将onwebviewcreated中的controller赋值的方法是不可取的，应该是使用futurebuilder之类的方式去实现比较优雅（我在gist上有完整的例子，大家可以看下）。
源码
调试工具推荐使用 amaze ui ，一个神奇的网站，一键生成调试网页，你值得拥有
注意：源码中的initialurl测试地址请自己生成！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。