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

一些坑

闪黑屏：第一次打开WebView会有时候会出现黑屏，可以使用一个闪屏页面覆盖。
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<String> _onUrlChanged;
//监听WebView的状态改变
  StreamSubscription<WebViewStateChanged> _onStateChanged;
//监听WebView的错误状态  
  StreamSubscription<WebViewHttpError> _onHttpError;

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

一些坑

页面退出：弹出 WebView页面需要先 close() ,再弹出否则会挡住退出动画。
锚点问题：hidden = true ，在Android会将WebVIew可见性设置为GONE，WebView不能准确计算高度，此时加载URL会遇到锚点位置不准确的问题。
hidden = false，在WebView绘制结束直接显示出来，由于WebView默认颜色为白色，出现主题颜色不一致问题。
跳转原生页面：由于不在 widget 树中，从WebView跳转原生页面需要先隐藏。
反复打开： 出现上一个页面dispose没有执行完，下一个页面initState开始执行出现卡死，维护WebView状态，监听WebView是否正常关闭。
多次打开：**重复点击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<String> postMessageToJs(String channel, String jsCode) {
    if (_webViewController == null) {
      Logger.tagW('_flutterWebViewPlugin is null');
      return Future.value('');
    }
    return _webViewController.evalJavascript('${channel}.postMessage(${jsCode});');
  }

例：获取页面Title

实现定义好如下JS Code：

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

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

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

添加页面加载完成监听运行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;
      }
    });

Flutter WebView 总结

Flutter WebView 总结

目录

前言

webview_flutter 官方组件

组件的使用

一些坑

flutter_webview 社区组件

组件的使用

一些坑

JS调用Flutter

flutter 调用 JS

例：获取页面Title