Flutter WebView的使用及其超連接的自定義處理

前言：

      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來加載網頁的功能已經實現啦，歡迎你們圍觀。若是有什麼疑問的話，能夠留言聯繫我哦！