本次教程使用的是Flutter官方提供的WebView組件webview_flutter 2.3.1考廉，flutter_android 2.2.1

一. WebView介紹

以下為Flutter WebView官方的介紹茉继，在Android采用原生的WebView實(shí)現(xiàn)翼闹，在IOS上采用WKWebView實(shí)現(xiàn)丁寄「逃可以看出Flutter目前沒有自己的WebView引擎屈雄，可能若干年后會(huì)開發(fā)出屬于Flutter的引擎，所以遇到問題多看Plugin源碼官套。

On iOS the WebView widget is backed by a WKWebView; On Android the WebView widget is backed by a WebView.

目前Flutter WebView提供的功能較少酒奶，文檔中沒寫到的，可以理解為暫時(shí)不支持奶赔，如果就想做惋嚎，建議修改Plugin代碼。如果想換內(nèi)核纺阔，比如Android端換騰訊X5內(nèi)核瘸彤，也可以修改Plugin端代碼(修改Plugin代碼只會(huì)修改本地對應(yīng)版本的緩存，修改不能提交到Git)笛钝。本文就有修改Plugin代碼需求质况，請往下看愕宋。

由于我本人是Android出身，所以更多的是從Android開發(fā)的視角來說明结榄。

二. WebView使用

添加依賴
dependencies: webview_flutter: ^2.3.1

引用包

import 'package:webview_flutter/webview_flutter.dart';

webview_flutter要求android minSdkVersion 19

1. 加載URL

WebView(initialUrl: "https://flutterchina.club/")

2. 加載本地文件

本地文件index.html在Flutter項(xiàng)目的路徑為./assets/index.html中贝。

2.1 Android加載本地文件

Android WebView本身支持加載本地文件，上述路徑在Android APK中的路徑為android_asset/flutter_assets/assets/index.html臼朗，所以代碼如下:

String url = "";
if (Platform.isAndroid) {
  url = "file:///android_asset/flutter_assets/assets/index.html";
}
...
WebView(initialUrl: url)

2.2 IOS加載本地文件

IOS WebView Plugin本身不支持加載本地文件邻寿，需要修改Plugin FlutterWebView.m代碼，Plugin源碼如下：

- (bool)loadUrl:(NSString*)url withHeaders:(NSDictionary<NSString*, NSString*>*)headers {
  NSURL* nsUrl = [NSURL URLWithString:url];
  if (!nsUrl) {
    return false;
  }
  NSMutableURLRequest* request = [NSMutableURLRequest requestWithURL:nsUrl];
  [request setAllHTTPHeaderFields:headers];
  [_webView loadRequest:request];
  return true;
}

修改后IOS Plugin代碼如下：

- (bool)loadUrl:(NSString*)url withHeaders:(NSDictionary<NSString*, NSString*>*)headers {
  NSURL* nsUrl = [NSURL URLWithString:url];
  NSLog(@"webview_flutter:  %@", nsUrl);
  NSMutableURLRequest* request = [NSMutableURLRequest requestWithURL:nsUrl];
  [request setAllHTTPHeaderFields:headers];
  if([url hasPrefix:@"http"]) {
      [_webView loadRequest:request];
  }else{
      if (@available(iOS 9.0, *)) {
          NSURL *findUrl = [NSURL fileURLWithPath:[NSString stringWithFormat:@"%@/Frameworks/App.framework/flutter_assets/webres/%@", [[NSBundle mainBundle] bundlePath], @"index.html"]];
          NSLog(@"Debug >>>> %@", findUrl);
          
          NSString *loadUrl = [findUrl.absoluteString stringByReplacingOccurrencesOfString:@"index.html" withString:url];
                    NSURL * url = [NSURL URLWithString:loadUrl];
          NSLog(@"Debug >>>> load url %@", url);
          [_webView loadFileURL:url allowingReadAccessToURL:[url URLByDeletingLastPathComponent]];
      } else {
          // Fallback on earlier versions
          NSLog(@"webview_flutter:  loadFileUrl error");
      }
  }
  return true;
}

Flutter代碼如下:

String url = "";
if (Platform.isIOS) {
  url = "file://Frameworks/App.framework/flutter_assets/assets/index.html";
}
...
WebView(initialUrl: url)

由于Flutter Dependencies 依賴版本規(guī)則問題视哑，webview_flutter_wkwebview可能不定期升級绣否，請以官方代碼FlutterWebView.m為準(zhǔn)，如果代碼不一致挡毅，請按照以上思路修改代碼蒜撮。

三. WebView詳細(xì)說明

1. WebView

使用起來很簡單，看一下WebView的完整參數(shù)跪呈，以下是整理簡寫的偽代碼:

 WebView(
   onWebViewCreated : void Function(WebViewController controller),
   initialUrl : String?,
   javascriptMode : JavascriptMode = JavascriptMode.disabled,
   javascriptChannels : Set<JavascriptChannel>?,
   navigationDelegate : NavigationDelegate?,
   gestureRecognizers : Set<Factory<OneSequenceGestureRecognizer>>?,
   onPageStarted : (void Function(String url))?,
   onPageFinished : (void Function(String url))?,
   onProgress : (void Function(int progress))?,
   onWebResourceError : (void Function(WebResourceError error))?,
   debuggingEnabled : bool = false,
   gestureNavigationEnabled : bool = false,
   userAgent : String?,
   zoomEnabled : bool = true,
   initialMediaPlaybackPolicy : AutoMediaPlaybackPolicy = AutoMediaPlaybackPolicy.require_user_action_for_all_media_types,
   allowsInlineMediaPlayback : bool  = false,
  )

1. onWebViewCreated: 創(chuàng)建WebView時(shí)調(diào)用段磨，返回WebViewController對象。

2. initialUrl: WebView加載的URL耗绿，也可以指定本地文件苹支，如assets/index.html

   • 在Android上的路徑file:///android_asset/flutter_assets/assets/index.html,
   • 在IOS上的路徑file://Frameworks/App.framework/flutter_assets/assets/index.html(由于IOS端不支持加載本地HTML，所以需要修改IOS端Plugin代碼)误阻。

3. javascriptMode: 是否啟用JavaScript债蜜，默認(rèn)為JavascriptMode.disabled

   • JavascriptMode.disabled: 禁用JavaScript
   • JavascriptMode.unrestricted: 啟用JavaScript

4. javascriptChannels : JavaScript調(diào)用Flutter的方法渠道配置，常用方式究反。

5. navigationDelegate : WebView導(dǎo)航攔截策幼，點(diǎn)擊鏈接跳轉(zhuǎn)時(shí)觸發(fā)∨簦可以通過攔截指定特征的URL，用作與JavaScript交互晶丘。(個(gè)人不推薦使用：1. 不安全 2. HTTP1.1以下有長度限制)

   目前發(fā)現(xiàn)設(shè)置javascriptChannels后黍氮，navigationDelegate不會(huì)再觸發(fā)，原因不得而知浅浮。

6. gestureRecognizers: 處理WebView與Wideget嵌套時(shí)的手勢交互沫浆。

7. onPageStarted: 頁面開始加載時(shí)觸發(fā)，可以用來顯示進(jìn)度條滚秩。

8. onPageFinished: 頁面加載結(jié)束時(shí)觸發(fā)专执，可以隱藏進(jìn)度條。

9. onProgress: 加載進(jìn)度郁油。

10. onWebResourceError: 資源加載失敗時(shí)觸發(fā)本股，返回的數(shù)據(jù)因平臺而異(就是包裝了原生平臺的錯(cuò)誤信息)攀痊。

11. debuggingEnabled: 調(diào)試開關(guān)。

    • Android可以使用Chrome調(diào)試WebView加載拄显，使用方法
    • IOS可以使用Safari調(diào)試苟径。

12. gestureNavigationEnabled: 是否開始手勢返回功能，默認(rèn)關(guān)閉躬审，只在IOS上有效棘街。

13. userAgent: HTTP請求頭User Agent配置。

14. zoomEnabled: 是否開啟手勢縮放承边，默認(rèn)開始遭殉。

    如果要關(guān)閉手勢，在IOS上必須設(shè)置javascriptMode = JavascriptMode.unrestricted才會(huì)生效博助。

15. initialMediaPlaybackPolicy: 媒體播放設(shè)置险污，默認(rèn)為AutoMediaPlaybackPolicy.require_user_action_for_all_media_types。

    • AutoMediaPlaybackPolicy.require_user_action_for_all_media_types:需要用戶同意后才可以使用媒體播放器翔始。
    • AutoMediaPlaybackPolicy.always_allow:總是允許播放媒體戳寸。

16. allowsInlineMediaPlayback: 控制IOS是否允許在HTML5上嵌入媒體播放器，在Android上默認(rèn)允許撵儿。

2. WebViewController

下面看一下WebViewController的偽代碼:

class WebViewController {

      Future<void> loadUrl(String url, {Map<String, String>? headers})

      Future<String?> currentUrl()

      Future<bool> canGoBack()

      Future<bool> canGoForward() 

      Future<void> goBack()

      Future<void> goForward()

      Future<void> reload()

      Future<void> clearCache()

      @Deprecated('Use [runJavascript] or [runJavascriptReturningResult]')
      Future<String> evaluateJavascript(String javascriptString)

      Future<void> runJavascript(String javaScriptString)

      Future<String> runJavascriptReturningResult(String javaScriptString)

      Future<String?> getTitle()

      Future<void> scrollTo(int x, int y)

      Future<void> scrollBy(int x, int y)

      Future<int> getScrollX()

      Future<int> getScrollY()
}

1. loadUrl : 加載新頁面

2. currentUrl : 獲取當(dāng)前URL

3. canGoBack : 是否可以回退

4. canGoForward : 是否可以前進(jìn)

5. goBack : 回退（如果不可回退甘晤，就不執(zhí)行任何操作）

6. goForward : 前進(jìn)（如果不可前進(jìn)，就不執(zhí)行任何操作）

7. reload : 重新加載/刷新

8. clearCache : 清除緩存

9. evaluateJavascript : 調(diào)用JavaScript方法脖镀，已過時(shí)飒箭，使用runJavascript/runJavascriptReturningResult代替

10. runJavascript : 無返回值的調(diào)用JavaScript方法

11. runJavascriptReturningResult : 有返回值的調(diào)用JavaScript方法

12. getTitle : 獲取HTML標(biāo)題

13. scrollTo : 滑動(dòng)到X、Y位置

14. scrollBy : 在當(dāng)前位置上滑動(dòng)X蜒灰、Y長度

15. getScrollX : 獲取X軸滑動(dòng)長度弦蹂，單位:pixels

16. getScrollY : 獲取Y軸滑動(dòng)長度，單位:pixels

3. Cookie

Cookie目前只支持刪除强窖，方法有以下兩個(gè)：

1. WebView.platform.clearCookies();

2. CookieManager().clearCookies();

四. WebView與JS交互

1. Flutter調(diào)用JS方法

JS代碼如下凸椿，分別有一個(gè)無返回值和一個(gè)有返回值的方法。

<script>
  function flutterCallJsMethod(message){
    alert(message);
    return "我是JS返回的Result";
  }

  function flutterCallJsMethodNoResult(message){
    alert(message);
  }
</script>

Flutter端調(diào)用代碼如下:

///調(diào)用有返回值JS方法翅溺，并打印結(jié)果
_controller
    .runJavascriptReturningResult(
        "flutterCallJsMethod('Flutter調(diào)用了JS')")
    .then((value) {
  Fluttertoast.showToast(msg: value.toString());
});

///調(diào)用無返回值JS方法
_controller
     .runJavascript("flutterCallJsMethodNoResult('Flutter調(diào)用了JS')");

evaluateJavascript：方法已經(jīng)棄用脑漫。

2. JS調(diào)用Flutter方法

Flutter提供了簡單的支持JS調(diào)用的方法和參數(shù)，也可以通過修改Plugin實(shí)現(xiàn)自定義方法和參數(shù)咙崎。

2.1 默認(rèn)方法

Flutter端代碼如下

WebView(
...
javascriptMode: JavascriptMode.unrestricted,
javascriptChannels: {
    JavascriptChannel(
        name: "toast",
        onMessageReceived: (message) {
        String result = message.message;
        ...
        }),
},
...
)

javascriptChannels:表示JS可以調(diào)用Flutter的對象集合
name:表示映射的對象名
onMessageReceived:為JS傳過來的參數(shù)

以上代碼在Android端的實(shí)現(xiàn)為

webView.addJavascriptInterface(new JsInterface(), "toast");
...
public class JsInterface {
    @JavascriptInterface
    public void postMessage(String message) {
       ...
    }
}

JavaScript調(diào)用代碼如下

<script>
    function jsCallFlutter(){
      toast.postMessage("JS調(diào)用Flutter postMessage");
    }
</script>

name:toast : 這個(gè)值是三端公共定義的优幸。

postMessage : 這個(gè)方法是Flutter Plugin內(nèi)部默認(rèn)定義好的一個(gè)方法。之所以叫這個(gè)名字是為了更好的兼容IOS褪猛。

IOS WebKit提供了一個(gè)默認(rèn)的name:postMessage网杆，參考文檔

The user content controller uses this parameter to define a JavaScript function for your message handler in all frames in the specified content world. 
The name of this function is window.webkit.messageHandlers.<name>.postMessage(<messageBody>), where <name> corresponds to the value of this parameter. 
For example, if you specify the string MyFunction, the user content controller defines the window.webkit.messageHandlers.MyFunction.postMessage() function in JavaScript.

2.2 自定義方法和參數(shù)

自定義方法名和參數(shù)，需要修改Plugin代碼。

JS端代碼如下

<script>
    function jsCallFlutter2(){
      jscomm.toLocalEvent("JS調(diào)用Flutter", "callNative");
    }
</script>

Flutter端代碼如下

javascriptMode: JavascriptMode.unrestricted,
javascriptChannels: {
  ...
  JavascriptChannel(
      name: "jscomm",
      onMessageReceived: (message) {
        dynamic result = json.decode(message.message);
        String event = result["event"];
        String data = result["data"];
      }),
},

以上代碼在Android端的實(shí)現(xiàn)為

webView.addJavascriptInterface(new JsInterface(), "jscomm");
...
public class JsInterface {
    @JavascriptInterface
    public void toLocalEvent(String event,String data) {

    }
}

修改Flutter Plugin代碼:JavaScriptChannel.java

//默認(rèn)實(shí)現(xiàn)的方法
@JavascriptInterface
public void postMessage(final String message) {
    Runnable postMessageRunnable =
            new Runnable() {
                @Override
                public void run() {
                    HashMap<String, String> arguments = new HashMap<>();
                    arguments.put("channel", javaScriptChannelName);
                    arguments.put("message", message);
                    methodChannel.invokeMethod("javascriptChannelMessage", arguments);
                }
            };
    if (platformThreadHandler.getLooper() == Looper.myLooper()) {
        postMessageRunnable.run();
    } else {
        platformThreadHandler.post(postMessageRunnable);
    }
}

//新增加的方法
@JavascriptInterface
public void toLocalEvent(final String event, final String data) {
    Runnable postMessageRunnable =
            new Runnable() {
                @Override
                public void run() {
                    JSONObject jsonObject = new JSONObject();
                    try {
                        jsonObject.put("event", event);
                        jsonObject.put("data", data);
                    } catch (JSONException e) {
                    }
                    HashMap<String, String> arguments = new HashMap<>();
                    arguments.put("channel", javaScriptChannelName);
                    arguments.put("message", jsonObject.toString());
                    methodChannel.invokeMethod("javascriptChannelMessage", arguments);
                }
            };
    if (platformThreadHandler.getLooper() == Looper.myLooper()) {
        postMessageRunnable.run();
    } else {
        platformThreadHandler.post(postMessageRunnable);
    }
}

注意：這個(gè)新增的toLocalEvent方法碳却，修改的是本地緩存代碼队秩，不能提交到Git上，也就是說只有修改的那個(gè)人運(yùn)行的代碼有效追城！

以上就是這次分享的全部了刹碾，切記修改的Plugin代碼不會(huì)被提交，如果示例代碼無法運(yùn)行座柱，仔細(xì)看文檔迷帜。

index.html完整源碼見GitHub

Flutter完整源碼見GitHub