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

2019独角兽企业重金招聘Python工程师标准>>>

前言：

      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，同样也得添加信任)

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

5.总结

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

 

转载于:https://my.oschina.net/wupeilin/blog/3037550