flutter开发实战-webview插件flutter

Flutter开发实战-webview插件flutter_inappwebview使用

在开发过程中，经常遇到需要使用WebView，Webview需要调用原生的插件来实现。常见的flutter的webview插件是webview_flutter，flutter_inappwebview。之前整理了一下webview_flutter，查看https://blog.csdn.net/gloryFlow/article/details/131683122

这里我们使用flutter_inappwebview来加载网页。

一、引入flutter_inappwebview

使用flutter_inappwebview，需要在pubspec.yaml引入插件。

  # 浏览器
  flutter_inappwebview: 5.4.3+7

二、使用flutter_inappwebview

使用flutter_inappwebview插件前，我们先看下flutter_inappwebview提供的webview的属性

WebView(
      {this.windowId,
      this.onWebViewCreated,
      this.onLoadStart,
      this.onLoadStop,
      this.onLoadError,
      this.onLoadHttpError,
      this.onProgressChanged,
      this.onConsoleMessage,
      this.shouldOverrideUrlLoading,
      this.onLoadResource,
      this.onScrollChanged,
      @Deprecated('Use `onDownloadStartRequest` instead')
          this.onDownloadStart,
      this.onDownloadStartRequest,
      this.onLoadResourceCustomScheme,
      this.onCreateWindow,
      this.onCloseWindow,
      this.onJsAlert,
      this.onJsConfirm,
      this.onJsPrompt,
      this.onReceivedHttpAuthRequest,
      this.onReceivedServerTrustAuthRequest,
      this.onReceivedClientCertRequest,
      this.onFindResultReceived,
      this.shouldInterceptAjaxRequest,
      this.onAjaxReadyStateChange,
      this.onAjaxProgress,
      this.shouldInterceptFetchRequest,
      this.onUpdateVisitedHistory,
      this.onPrint,
      this.onLongPressHitTestResult,
      this.onEnterFullscreen,
      this.onExitFullscreen,
      this.onPageCommitVisible,
      this.onTitleChanged,
      this.onWindowFocus,
      this.onWindowBlur,
      this.onOverScrolled,
      this.onZoomScaleChanged,
      this.androidOnSafeBrowsingHit,
      this.androidOnPermissionRequest,
      this.androidOnGeolocationPermissionsShowPrompt,
      this.androidOnGeolocationPermissionsHidePrompt,
      this.androidShouldInterceptRequest,
      this.androidOnRenderProcessGone,
      this.androidOnRenderProcessResponsive,
      this.androidOnRenderProcessUnresponsive,
      this.androidOnFormResubmission,
      @Deprecated('Use `onZoomScaleChanged` instead')
          this.androidOnScaleChanged,
      this.androidOnReceivedIcon,
      this.androidOnReceivedTouchIconUrl,
      this.androidOnJsBeforeUnload,
      this.androidOnReceivedLoginRequest,
      this.iosOnWebContentProcessDidTerminate,
      this.iosOnDidReceiveServerRedirectForProvisionalNavigation,
      this.iosOnNavigationResponse,
      this.iosShouldAllowDeprecatedTLS,
      this.initialUrlRequest,
      this.initialFile,
      this.initialData,
      this.initialOptions,
      this.contextMenu,
      this.initialUserScripts,
      this.pullToRefreshController,
      this.implementation = WebViewImplementation.NATIVE});
}

列一下常用的几个

• initialUrlRequest：加载url的请求
• initialUserScripts：初始化设置的script
• initialOptions：初始化设置的配置
• onWebViewCreated：webview创建后的callback回调
• onTitleChanged：网页title变换的监听回调
• onLoadStart：网页开始加载
• shouldOverrideUrlLoading：确定路由是否可以替换，比如可以控制某些连接不允许跳转。
• onLoadStop：网页加载结束
• onProgressChanged：页面加载进度progress
• onLoadError：页面加载失败
• onUpdateVisitedHistory；更新访问的历史页面回调
• onConsoleMessage：控制台消息，用于输出console.log信息

  使用WebView加载网页

  class WebViewInAppScreen extends StatefulWidget {
    const WebViewInAppScreen({
      Key? key,
      required this.url,
      this.onWebProgress,
      this.onWebResourceError,
      required this.onLoadFinished,
      required this.onWebTitleLoaded,
      this.onWebViewCreated,
    }) : super(key: key);
    final String url;
    final Function(int progress)? onWebProgress;
    final Function(String? errorMessage)? onWebResourceError;
    final Function(String? url) onLoadFinished;
    final Function(String? webTitle)? onWebTitleLoaded;
    final Function(InAppWebViewController controller)? onWebViewCreated;
    @override
    State createState() => _WebViewInAppScreenState();
  }
  class _WebViewInAppScreenState extends State {
    final GlobalKey webViewKey = GlobalKey();
    InAppWebViewController? webViewController;
    InAppWebViewOptions viewOptions = InAppWebViewOptions(
      useShouldOverrideUrlLoading: true,
      mediaPlaybackRequiresUserGesture: true,
      applicationNameForUserAgent: "dface-yjxdh-webview",
    );
    @override
    void initState() {
      // TODO: implement initState
      super.initState();
    }
    @override
    void dispose() {
      // TODO: implement dispose
      webViewController?.clearCache();
      super.dispose();
    }
    // 设置页面标题
    void setWebPageTitle(data) {
      if (widget.onWebTitleLoaded != null) {
        widget.onWebTitleLoaded!(data);
      }
    }
    // flutter调用H5方法
    void callJSMethod() {
      
    }
    @override
    Widget build(BuildContext context) {
      return Column(
        children: [
          Expanded(
            child: InAppWebView(
              key: webViewKey,
              initialUrlRequest: URLRequest(url: Uri.parse(widget.url)),
              initialUserScripts: UnmodifiableListView([
                UserScript(
                    source:
                        "document.cookie='token=${ApiAuth().token};domain='.laileshuo.cb';path=/'",
                    injectionTime: UserScriptInjectionTime.AT_DOCUMENT_START),
              ]),
              initialOptions: InAppWebViewGroupOptions(
                crossPlatform: viewOptions,
              ),
              onWebViewCreated: (controller) {
                webViewController = controller;
                if (widget.onWebViewCreated != null) {
                  widget.onWebViewCreated!(controller);
                }
              },
              onTitleChanged: (controller, title) {
                if (widget.onWebTitleLoaded != null) {
                  widget.onWebTitleLoaded!(title);
                }
              },
              onLoadStart: (controller, url) {},
              shouldOverrideUrlLoading: (controller, navigationAction) async {
                // 允许路由替换
                return NavigationActionPolicy.ALLOW;
              },
              onLoadStop: (controller, url) async {
                // 加载完成
                widget.onLoadFinished(url.toString());
              },
              onProgressChanged: (controller, progress) {
                if (widget.onWebProgress != null) {
                  widget.onWebProgress!(progress);
                }
              },
              onLoadError: (controller, Uri? url, int code, String message) {
                if (widget.onWebResourceError != null) {
                  widget.onWebResourceError!(message);
                }
              },
              onUpdateVisitedHistory: (controller, url, androidIsReload) {},
              onConsoleMessage: (controller, consoleMessage) {
                print(consoleMessage);
              },
            ),
          ),
          Container(
            height: ScreenUtil().bottomBarHeight + 50.0,
            color: Colors.white,
            child: Column(
              children: [
                Expanded(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      ElevatedButton(
                        child: Icon(Icons.arrow_back),
                        onPressed: () {
                          webViewController?.goBack();
                        },
                      ),
                      SizedBox(
                        width: 25.0,
                      ),
                      ElevatedButton(
                        child: Icon(Icons.arrow_forward),
                        onPressed: () {
                          webViewController?.goForward();
                        },
                      ),
                      SizedBox(
                        width: 25.0,
                      ),
                      ElevatedButton(
                        child: Icon(Icons.refresh),
                        onPressed: () {
                          // callJSMethod();
                          webViewController?.reload();
                        },
                      ),
                    ],
                  ),
                ),
                Container(
                  height: ScreenUtil().bottomBarHeight,
                ),
              ],
            ),
          ),
        ],
      );
    }
  }
  

  三、小结

  flutter开发实战-webview插件flutter_inappwebview使用。描述可能不准确，请见谅。

  https://blog.csdn.net/gloryFlow/article/details/133489866

  学习记录，每天不停进步。