来自 技术 2019-04-17 的文章

Flutter开发 WebView的使用及其超链接的自定义处理

八年Java开发的感悟:什么才是程序员的立身之本>>>   

前言:

Flutter项目需要使用WebView来加载网页,在这里我使用的是flutter_inappbrowser插件在APP内部加载网页的。下面我简单总结一下在Flutter中如何使用WebView,主要包括WebView的实现,WebView的超链接用系统浏览器打开网页和WebView的超链接无法加载网页的异常处理。

实现的步骤:

1.在pubspec.yaml添加sdk

dependencies: ... cupertino_icons: ^0.1.0 flutter_inappbrowser: ^1.1.1 url_launcher: ^4.0.1+1

2.WebView的实现

import 'package:flutter_inappbrowser/flutter_inappbrowser.dart';class CommonWebViewPageState extends State<CommonWebViewPage> { InAppWebViewController webView; String url = url; //url的链接 @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("标题”)), body: new InAppWebView( initialUrl: url, onWebViewCreated: (InAppWebViewController controller) { webView = controller; }, onLoadStart: (InAppWebViewController controller, String url) { setState(() { this.url = url; }); }, ), ); }}

3.WebView的超链接用系统浏览器打开网页

import 'package:flutter_inappbrowser/flutter_inappbrowser.dart';import 'package:url_launcher/url_launcher.dart';class CommonWebViewPageState extends State<CommonWebViewPage> { InAppWebViewController webView; String url = url; //url的链接 @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("标题”)), body: InAppWebView( initialUrl: url, initialOptions: { "useShouldOverrideUrlLoading": true, //设置useShouldOverrideUrlLoading为true,否则无效 }, onWebViewCreated: (InAppWebViewController controller) { webView = controller; }, onLoadStart: (InAppWebViewController controller, String url) { setState(() { this.url = url; }); }, shouldOverrideUrlLoading: (InAppWebViewController controller, String url) { if (url.contains("android_asset")) { return false;//用webview打开 } launch(url); return true; //用浏览器打开 } ) ); }}

4.WebView的超链接无法加载网页的异常处理

4.1 在iOS 的info.plist中添加对HTTP的信任。(webview插件在iOS中无法加载HTTP请求,虽然Flutter可以加载HTTP请求,Flutter跟iOS的框架是有区别的,Flutter是独立于UIKit框架的)

<key>NSAppTransportSecurity</key><dict> <key>NSAllowsArbitraryLoads</key> <true/></dict>

4.2 在Android的清单文件中设置networkSecurityConfig属性。(Android9.0之前的系统,使用过程中并未发生异常。 但是Android9.0之后,不支持HTTP,同样也得添加信任)

<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" package="项目包名"> <application android:name="io.flutter.app.FlutterApplication" android:label="项目名称" android:icon="@mipmap/ic_launcher" android:networkSecurityConfig="@xml/network_security_config"> </application></manifest>

4.3 在Android的资源文件夹res/xml下面创建network_security_config.xml

<?xml version="1.0" encoding="utf-8"?><network-security-config> <base-config cleartextTrafficPermitted="true"> <trust-anchors> <certificates src="system" /> </trust-anchors> </base-config></network-security-config>

5.总结

在Flutter上使用WebView来加载网页的功能已经实现啦,欢迎大家围观。如果有什么疑问的话,可以留言联系我哦!

标签:   Flutter      paas云平台      php的sapi   
上一篇:好程序员web前端分享JS检查浏览器类型和版本
下一篇:没有了