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,

),

],

),

),

],

);

}

}

三、小结