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

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;@overrideState<WebViewInAppScreen> createState() => _WebViewInAppScreenState();
}class _WebViewInAppScreenState extends State<WebViewInAppScreen> {final GlobalKey webViewKey = GlobalKey();InAppWebViewController? webViewController;InAppWebViewOptions viewOptions = InAppWebViewOptions(useShouldOverrideUrlLoading: true,mediaPlaybackRequiresUserGesture: true,applicationNameForUserAgent: "dface-yjxdh-webview",);@overridevoid initState() {// TODO: implement initStatesuper.initState();}@overridevoid dispose() {// TODO: implement disposewebViewController?.clearCache();super.dispose();}// 设置页面标题void setWebPageTitle(data) {if (widget.onWebTitleLoaded != null) {widget.onWebTitleLoaded!(data);}}// flutter调用H5方法void callJSMethod() {}@overrideWidget build(BuildContext context) {return Column(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 {// 允许路由替换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: <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

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