Flutter官方WebView使用

使用过人气很高的 flutter_webview_plugin，但是缺少 2 个重要的功能。也在打开多个 WebView 时会出错。

• 不能在 JS 中调用 Flutter 方法
• 不能在 H5 进入某个 URL 之前拦截

虽然该插件不够完整，但是使用起来很方便，封装了很多功能。如果交互不多可以用该插件。

官方的 webview_flutter

之后使用官方的 webview_flutter 插件。

附：

在老版本的 Flutter WebView 有在 Android 中无法调弹出键盘的问题，在 webview_flutter Version 0.3.10+2 中已经修复该 BUG，使用最新版的 Flutter SDK (flutter _v1.7.8+hotfix.3-stable)

见 GitHub Issue：issues/19718

真的很好用。官方的 Example 也很到位哈。

JS 调用 Flutter

使用实例：

    // 定义方法
    JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
        return JavascriptChannel(
            name: 'Toaster',
            onMessageReceived: (JavascriptMessage message) {Scaffold.of(context).showSnackBar(SnackBar(content: Text(message.message)),
            );
            });
    }
    
    // 暴露给 WebView
    WebView(
        // ... 略
        javascriptChannels: <JavascriptChannel>[_toasterJavascriptChannel(context),
        ].toSet(),)

    // JS 调用方法
    Toaster.postMessage('弹弹乐');

Flutter 调用 JS

    WebViewController _webViewController;

    WebView(
        // ... 略
        javascriptMode: JavascriptMode.unrestricted, // 使用 JS 没限制
        onWebViewCreated: (WebViewController webViewController) {
            // 在 WebView 创建完成后会产生一个 webViewController
            _webViewController = webViewController;
        },
    )

    // 之后可以调用 _webViewController 的 evaluateJavascript 属性来注入 JS
    _webViewController.evaluateJavascript("Toaster.postMessage(' 弹弹乐 ');");

拦截 URL

    WebView(navigationDelegate: (NavigationRequest request) {
            // 判断 URL
            if (request.url.startsWith('https://www.baidu.com')) {
                // 做一些事情
                // 阻止进入登录页面
                return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
        },
    );