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

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加载网页

classWebViewInAppScreenextendsStatefulWidget{constWebViewInAppScreen({Key? key,
    required this.url,this.onWebProgress,this.onWebResourceError,
    required this.onLoadFinished,
    required this.onWebTitleLoaded,this.onWebViewCreated,}):super(key: key);finalString url;finalFunction(int progress)? onWebProgress;finalFunction(String? errorMessage)? onWebResourceError;finalFunction(String? url) onLoadFinished;finalFunction(String? webTitle)? onWebTitleLoaded;finalFunction(InAppWebViewController controller)? onWebViewCreated;@overrideState<WebViewInAppScreen>createState()=>_WebViewInAppScreenState();}class _WebViewInAppScreenState extendsState<WebViewInAppScreen>{finalGlobalKey webViewKey =GlobalKey();InAppWebViewController? webViewController;InAppWebViewOptions viewOptions =InAppWebViewOptions(
    useShouldOverrideUrlLoading:true,
    mediaPlaybackRequiresUserGesture:true,
    applicationNameForUserAgent:"dface-yjxdh-webview",);@overridevoidinitState(){// TODO: implement initStatesuper.initState();}@overridevoiddispose(){// TODO: implement dispose
    webViewController?.clearCache();super.dispose();}// 设置页面标题voidsetWebPageTitle(data){if(widget.onWebTitleLoaded !=null){
      widget.onWebTitleLoaded!(data);}}// flutter调用H5方法voidcallJSMethod(){}@overrideWidgetbuild(BuildContext context){returnColumn(
      children:<Widget>[Expanded(
          child:InAppWebView(
            key: webViewKey,
            initialUrlRequest:URLRequest(url:Uri.parse(widget.url)),
            initialUserScripts:UnmodifiableListView<UserScript>([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{// 允许路由替换returnNavigationActionPolicy.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:<Widget>[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

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