Flutter WebView 总结

目录

• 前言
• webview_flutter 官方组件
• flutter_webview 社区组件
• JS调用Flutter
• Flutter调用JS

前言

---

说到跨平台开发，就不得不提 WebView，WebView 可以说是最廉价的跨平台开发方案。在flutter如果需要使用 WebView，目前有两种优秀的WebView插件。

• webview_flutter：flutter 官方WebView组件
• flutter_webview_plugin： flutter-community 维护的组件

webview_flutter 官方组件

---

 它是Flutter团队开发的,在iOS中底层调用的是WKWebView，在Android中底层调用的是WebView。特性是基于原生和 Flutter SDK 封装，继承 StatefulWidget，因此支持内嵌于 flutter Widget 树中，这是比较灵活的。

集成方式很简单，在 pubspec.yaml 文件中：

  # WebView flutter plugin (Official)
  webview_flutter: ^0.3.19+5

在2018年 Flutter 发展初期，官方的 webview_flutter 插件有很多问题，不过好在官方一直没有放弃，现在的插件已经修复了很多 bug 了，基本功能也在不断完善中。

组件的使用

开始之前先简单了解一下官方WebView所包含的API:

• onWebViewCreated：在WebView创建完成后调用，只会被调用一次；
• initialUrl：初始load的url；
• javascriptMode：JS执行模式（是否允许JS执行）；
• javascriptChannels：JS和Flutter通信的Channel；
• navigationDelegate：路由委托（可以通过在此处拦截url实现JS调用Flutter部分）；
• gestureRecognizers：手势监听；
• onPageStarted： WebView开始加载时回调。
• onPageFinished：WebView加载完毕时的回调。

一些坑

1. 闪黑屏：第一次打开WebView会有时候会出现黑屏，可以使用一个闪屏页面覆盖。
2. Bug：给Android release包加固后，当改变 App 生命周期时，WebView出现不能正常显示的Bug。该问题的原因不明，可以确定的是加固造成的后果。

flutter_webview 社区组件

---

当时 flutter 官方是没有 WebView 组件的，不过强大的 flutter-community 论坛考虑到广大开发者的需求，开发了 flutter_webview_plugin 插件，方便在 flutter 中使用使用 WebView。

集成方式很简单，在 pubspec.yaml 文件中：

  # Flutter WebView plugin (Community)
  flutter_webview_plugin: ^0.3.10+1

在实际使用中，由于 flutter_webview_plugin 并不存在于 widget 树中，所以不能在 flutter_webview_plugin 中使用如 snackbars, dialogs...这些通知交互 widget。

组件的使用

开始之前先简单了解一下WebView所包含的API:

• url：初始load的url；
• headers：添加请求头；
• javascriptChannels：JS和Flutter通信的Channel；
• navigationDelegate：路由委托（可以通过在此处拦截url实现JS调用Flutter部分）；
• withJavascript：允许与JS通信；
• clearCache：是否清除缓存；
• clearCookies：是否清除Cookies；
• mediaPlaybackRequiresUserGesture：媒体播放时用户手势；
• rect：大小与位置；
• withZoom： 是否允许缩放。
• withLocalStorage：是否开启本地缓存。
• scrollBar：是否显示scrollBar。
• hidden：初始化时是否隐藏。
• allowFileURLs：是否允许请求本地的FileURL

//监听URL的改变
  StreamSubscription _onUrlChanged;
//监听WebView的状态改变
  StreamSubscription _onStateChanged;
//监听WebView的错误状态  
  StreamSubscription _onHttpError;

@override
  void dispose() {
    // 最后销毁 webviewReference
    _onUrlChanged.cancel();
    _onStateChanged.cancel();
    _onHttpError.cancel();
    webviewReference.dispose();
    super.dispose();
  }

一些坑

1. 页面退出：弹出 WebView页面需要先 close() ,再弹出否则会挡住退出动画。
2. 锚点问题：hidden = true ，在Android会将WebVIew可见性设置为GONE，WebView不能准确计算高度，此时加载URL会遇到锚点位置不准确的问题。
   hidden = false，在WebView绘制结束直接显示出来，由于WebView默认颜色为白色，出现主题颜色不一致问题。
3. 跳转原生页面：由于不在 widget 树中，从WebView跳转原生页面需要先隐藏。
4. 反复打开： 出现上一个页面dispose没有执行完，下一个页面initState开始执行出现卡死，维护WebView状态，监听WebView是否正常关闭。
5. 多次打开：**重复点击WebView会执行两次 initState 出现卡死问题，可以使用延迟加载策略解决问题。

JS调用Flutter

定义一个JavascriptChanne(name, onMessage)。这个name属性接收的是一个字符串，它代表了JS调用Flutter时，双方共同商定好了的一个协议，JS通过这个name去post对应的信息给Flutter（API为name.postMessage('xxxxxx')）。开始JS调用Flutter的逻辑：

  JavascriptChannel buildChannelFromJs({String name, JsMessageCallback onMessage}) {
    return JavascriptChannel(
      name: name,
      onMessageReceived: (JavascriptMessage message) {
        Logger.tagD('JsMessage: ${message.message}');
        onMessage(message.message);
      },
    );
  }

flutter 调用 JS

_webViewController.evalJavascript() 方法来运行JS代码。postMessageToJs() 包装了一层。

  /// Flutter calls JS
  Future postMessageToJs(String channel, String jsCode) {
    if (_webViewController == null) {
      Logger.tagW('_flutterWebViewPlugin is null');
      return Future.value('');
    }
    return _webViewController.evalJavascript('${channel}.postMessage(${jsCode});');
  }

例：获取页面Title

1. 实现定义好如下JS Code：

pageTitle.postMessage('window.document.title') // JS code

2. 定义JavascriptChannel()，通过监听 pageTitle 频道去回调 onMessageTitle()

void onMessageTitle(String message) => setState(() => _pageTitle = message);
buildChannelFromJs('pageTitle', onMessage: onMessageTitle)

3. 添加页面加载完成监听运行JS代码，将得到的页面Title作为参数传给 onMessageTitle()

// WebViewState.finishLoad 页面加载完成时，执行postMessageToJs() 获取页面Title。
 _onStateChanged = _webViewController.onStateChanged.listen((WebViewStateChanged state) {
      switch (state.type) {
        case WebViewState.finishLoad:
          _webViewController.evalJavascript('pageTitle.postMessage('window.document.title')')
          break;
        default:
          break;
      }
    });