本文采用Flutter官方WebView插件：pub.dartlang.org/packages/we…
  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功能：

    1. JavascriptChannel _alertJavascriptChannel(BuildContext context) {
    2.   return JavascriptChannel(
    3.       name: 'Toast',
    4.       onMessageReceived: (JavascriptMessage message) {
    5.         showToast(message.message);
    6.       });
    7. }
    8. WebView(
    9.   javascriptChannels: <JavascriptChannel>[
    10.       _alertJavascriptChannel(context),
    11.   ].toSet(),
    12. ;
    13. 复制代码

      在上面的代码中，我们定义了一个_alertJavascriptChannel变量，并给它起了个name叫Toast，这个name属性接收的是一个字符串，它代表了JS调用Flutter时，双方共同商定好了的一个协议，JS通过这个name去post对应的信息给Flutter（API为name.postMessage('xxxxxx')）。我们在网页部分写一个简单的button，点击后开始JS调用Flutter的逻辑：

    1. <button onclick="callFlutter()">callFlutter</button>
    2. function callFlutter(){
    3.  Toast.postMessage("JS调用了Flutter");
    4. }
    5. 复制代码

      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上带上我们想要传递的参数：

    1. <button onclick="callFlutter()">callFlutter</button>
    2. function callFlutter(){
    3. /*约定的url协议为：js://webview?arg1=111&arg2=222*/
    4. document.location = "js://webview?arg1=111&args2=222";
    5. }
    6. 复制代码

      在Flutter端，我们就可以在navigationDelegate回调中拦截这个符合js://webviewscheme的路由地址了：

    1. navigationDelegate: (NavigationRequest request) {
    2.           if (request.url.startsWith('js://webview')) {
    3.             showToast('JS调用了Flutter By navigationDelegate');
    4.             print('blocking navigation to $request}');
    5.             return NavigationDecision.prevent;
    6.           }
    7.           print('allowing navigation to $request');
    8.           return NavigationDecision.navigate;
    9.         },
    10. 复制代码

      我们通过return不同的值，告诉WebView怎么处理这个路由：

  • NavigationDecision.prevent：阻止路由替换；

  • NavigationDecision.navigate：允许路由替换。

    Flutter调用JS

      在WebView创建完成之后，我们可以拿到一个WebViewController，通过它的evaluateJavascript()方法，我们可以执行JS语句：
    1. onWebViewCreated: (WebViewController webViewController) {
    2.   _controller = webViewController;
    3. },
    4. ······
    5. floatingActionButton: FloatingActionButton(
    6.       onPressed: () {
    7.         _controller
    8.             ?.evaluateJavascript('callJS("visible")')
    9.             ?.then((result) {
    10.                 // You can handle JS result here.
    11.             });
    12.       },
    13.       child: Text('call JS'),
    14.     ),
    15. 复制代码
    ```html

function callJS(message){ document.getElementById(“p1”).style.visibility = message; } 复制代码 ``   在上面的例子中，我们点击floatingActionButton后，就会去执行JS中的callJS()方法了，具体UI体现为：将隐藏的段落重新显示。evaluateJavascript()返回值是一个Future，因此我们可以接收JS给我们的返回值，返回值格式请阅读官方API注释，要注意**Android端和iOS端的返回值格式是不一样的**，Android端返回的是json字符串，iOS暂时只支持string和string格式的NSArray，其他类型数据还不支持。<br />  这里要注意的是，**evaluateJavascript()方法，Flutter建议我们在onPageFinished回调之后去执行**，以保证所有的HTML都已经加载完毕了。因此在实际开发中，我这里展示的这种直接将onWebViewCreated中的controller赋值的方法是不可取的，应该是使用FutureBuilder`之类的方式去实现比较优雅（我在Gist上有完整的例子，大家可以看下）。

源码

  注意：源码中的initialUrl测试地址请自己生成！

作者：吉原拉面
链接：https://juejin.im/post/5ca1da31e51d4509ea3d0540
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。