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

在开发过程中，经常遇到需要使用WebView，Webview需要调用原生的插件来实现。常见的flutter的webview插件是webview_flutter，flutter_inappwebview。之前整理了一下webview_flutter，查看http://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<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=/'",
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使用。描述可能不准确，请见谅。

http://blog.csdn.net/gloryFlow/article/details/133489866

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