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

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