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

BruceGwo 2024-07-27 10:03:02 阅读 85

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引入插件。

<code> # 浏览器

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:初始化设置的scriptinitialOptions:初始化设置的配置onWebViewCreated:webview创建后的callback回调onTitleChanged:网页title变换的监听回调onLoadStart:网页开始加载shouldOverrideUrlLoading:确定路由是否可以替换,比如可以控制某些连接不允许跳转。onLoadStop:网页加载结束onProgressChanged:页面加载进度progressonLoadError:页面加载失败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<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",

);

@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: <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=/'",code>

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

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



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。