java重写webview_Flutter开发 WebView的使用及其超链接的自定义处理

骑猪看日落 2022-11-07 15:56 144阅读 0赞

前言：

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 \{

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 \{

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框架的)

NSAppTransportSecurity

NSAllowsArbitraryLoads

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

xmlns:tools="http://schemas.android.com/tools"

package="项目包名">

android:name="io.flutter.app.FlutterApplication"

android:label="项目名称"

android:icon="@mipmap/ic\_launcher"

android:networkSecurityConfig="@xml/network\_security\_config">

4.3 在Android的资源文件夹res/xml下面创建network\_security\_config.xml

5.总结

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

java重写webview_Flutter开发 WebView的使用及其超链接的自定义处理

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关自定义超链接文字提示效果

相关超链接

相关超链接的内部链接和外部链接

相关 java重写webview_Flutter开发 WebView的使用及其超链接的自定义处理

相关 JAVA使用自定义异常的优化——重写fillInStackTrace方法

相关 HTML中的超链接 使用

相关 TextView的超链接

相关 Java处理微博数据集中的超链接

相关详解java自定义注解及其开发

相关 HTML链接：带超链接的网页