Flutter webview 使用和交互

在Flutter中使用webview，在pub.dev中查看，有几个组件均可以使用webview

本文使用的是webview_flutter，它是Flutter团队开发的，目前还不是正式版，但已经可使用。在iOS中底层调用的是WKWebView，在Android中底层调用的是WebView。

webview_flutter 使用

1. 添加组件 添加webview_flutter
2. 主要代码

WebView(
   initialUrl: "https://flutterchina.club/",
   //JS执行模式 是否容许JS执行
   javascriptMode: JavascriptMode.unrestricted,
 )
复制代码

3. 针对iOS，须要在ios-Runner-info.plist中添加

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>
复制代码

第三步不可少，不然会报错。

Flutter调用JS

在调用以前 先看一下WebView的其余参数:

WebView建立完成时调用 onWebViewCreated,

要显示的url initialUrl

JS执行模式 默认是不调用 javascriptMode = JavascriptMode.disabled

使用javascriptChannel JS能够调用Flutter javascriptChannels

拦截请求 navigationDelegate

手势 gestureRecognizers

页面加载完成 onPageFinished

经过WebViewController调用evaluateJavascript方法，便可调用JS。

了解了每一个参数的做用以后，交互就看似简单了。

Flutter调用JS的流程：

1. WebView建立完成时在onWebViewCreated 中，获取到WebViewController实例。
2. 当页面加载完成以后，即onPageFinished以后，经过WebViewController的evaluateJavascript方法调用JS。
3. evaluateJavascript返回的是Future<String>，经过Future能够获取到JS的返回结果。

示例代码： 在页面加载完成以后，获取网页标题，并显示在导航栏上。

WebView(
    initialUrl: "https://flutterchina.club/",
    //JS执行模式 是否容许JS执行
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (controller) {
      _controller = controller;
    },
    onPageFinished: (url) {
        _controller.evaluateJavascript("document.title").then((result){
          setState(() {
            _title = result;
          });
        }
      );
    },
  )
复制代码

效果：

JS调用Flutter

JS调用Flutter主要看剩下的两个参数：

javascriptChannels

navigationDelegate

这两个参数均可以从JS调用Flutter，能够单独使用，也能够混合使用。

javascriptChannels使用：

javascriptChannels相似于往JS中注册方法，这些方法名要和web端约定好。

javascriptChannels参数接受Set<JavascriptChannel>一个成员类型为JavascriptChannel的Set集合。

来看一下JavascriptChannel的用法：

JavascriptChannel(
  name: "share",
  onMessageReceived: (JavascriptMessage message)    {
        print("参数为： ${message.message}");
  }
)
复制代码

在JS端就能够调用share方法，同时能够传递参数，在Flutter中经过JavascriptMessage能够获取到参数。

navigationDelegate使用：

navigationDelegate: (NavigationRequest request) {
  //对于须要拦截的操做 作判断
  if(request.url.startsWith("myapp://")) {
    print("即将打开 ${request.url}");
    //作拦截处理
    //pushto.... 
    
    Application.push(context, request.url);
    return NavigationDecision.prevent;
  }
  
  //不须要拦截的操做
  return NavigationDecision.navigate;
} ,
复制代码

例如想要经过webview打开app的原生页面，经过约定好的连接，拦截到指定连接后可跳转到原生页面。

完整示例代码：

import 'package:flutter/cupertino.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  WebViewController _controller;
  String _title = "webview";

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text("$_title"),
        ),
        child: SafeArea(
          child: WebView(
            initialUrl: "https://flutterchina.club/",
            //JS执行模式 是否容许JS执行
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (controller) {
              _controller = controller;
            },
            onPageFinished: (url) {
               _controller.evaluateJavascript("document.title").then((result){
                  setState(() {
                    _title = result;
                  });
                }
              );
            },
            navigationDelegate: (NavigationRequest request) {
              if(request.url.startsWith("myapp://")) {
                print("即将打开 ${request.url}");
                
                return NavigationDecision.prevent;
              }
              return NavigationDecision.navigate;
            } ,
            javascriptChannels: <JavascriptChannel>[
              JavascriptChannel(
                name: "share",
                onMessageReceived: (JavascriptMessage message) {
                  print("参数： ${message.message}");
                }
              ),
            ].toSet(),

          ),
        ),
    );
  }
}
复制代码

可能已经有同窗看出来了，JS调用Flutter时，JS获取不到Flutter的返回值，目前尚未找到直接的解决办法，但能够经过迂回的方法解决。

下面提供两种思路：

1. js调用Flutter时，除了传递业务须要的参数以外，再添加一个callbackname参数 经过callbackname参数把JS调用Flutter和Flutter返回参数绑定起来。

JavascriptChannel(
       name: "share",
       onMessageReceived: (JavascriptMessage message) {
       print("参数： ${message.message}");
                
        String callbackname = message.message; //实际应用中要经过map经过key获取
                  
        String data = "收到消息调用了";
        String script = "$callbackname($data)";
         _controller.evaluateJavascript(script);
       }
  )
复制代码

2. 在网页加载成功后,把JS须要获取的Flutter的值，注入到widow上, 在JS中就能够经过widow获取到相应的值。

String script = "window.isLogin=是否登陆";
 _controller.evaluateJavascript(script).then((result){

   }
);
复制代码