本次教程使用的是Flutter官方提供的WebView組件webview_flutter 2.3.1，flutter_android 2.2.1
一. WebView介紹
以下為Flutter WebView官方的介紹，在Android采用原生的WebView實現，在IOS上采用WKWebView實現。可以看出Flutter目前沒有自己的WebView引擎，可能若干年后會開發出屬于Flutter的引擎，所以遇到問題多看Plugin源碼。
On iOS the WebView widget is backed by a WKWebView; On Android the WebView widget is backed by a WebView.
目前Flutter WebView提供的功能較少，文檔中沒寫到的，可以理解為暫時不支持，如果就想做，建議修改Plugin代碼。如果想換內核，比如Android端換騰訊X5內核，也可以修改Plugin端代碼(修改Plugin代碼只會修改本地對應版本的緩存，修改不能提交到Git)。本文就有修改Plugin代碼需求，請往下看。
由于我本人是Android出身，所以更多的是從Android開發的視角來說明。
二. 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項目的路徑為./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 依賴版本規則問題，
webview_flutter_wkwebview可能不定期升級，請以官方代碼FlutterWebView.m為準，如果代碼不一致，請按照以上思路修改代碼。
三. WebView詳細說明
1. WebView
使用起來很簡單，看一下WebView的完整參數，以下是整理簡寫的偽代碼:
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,
)
onWebViewCreated: 創建WebView時調用，返回
WebViewController對象。-
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代碼)。
- 在
-
javascriptMode: 是否啟用
JavaScript，默認為JavascriptMode.disabled- JavascriptMode.disabled: 禁用
JavaScript - JavascriptMode.unrestricted: 啟用
JavaScript
- JavascriptMode.disabled: 禁用
javascriptChannels :
JavaScript調用Flutter的方法渠道配置，常用方式。-
navigationDelegate : WebView導航攔截，點擊鏈接跳轉時觸發。可以通過攔截指定特征的URL，用作與
JavaScript交互。(個人不推薦使用：1. 不安全 2. HTTP1.1以下有長度限制)目前發現設置
javascriptChannels后，navigationDelegate不會再觸發，原因不得而知。 gestureRecognizers: 處理WebView與Wideget嵌套時的手勢交互。
onPageStarted: 頁面開始加載時觸發，可以用來顯示進度條。
onPageFinished: 頁面加載結束時觸發，可以隱藏進度條。
onProgress: 加載進度。
onWebResourceError: 資源加載失敗時觸發，返回的數據因平臺而異(就是包裝了原生平臺的錯誤信息)。
-
debuggingEnabled: 調試開關。
-
Android可以使用Chrome調試WebView加載，使用方法 -
IOS可以使用Safari調試。
-
gestureNavigationEnabled: 是否開始手勢返回功能，默認關閉，只在IOS上有效。
userAgent: HTTP請求頭
User Agent配置。-
zoomEnabled: 是否開啟手勢縮放，默認開始。
如果要關閉手勢，在IOS上必須設置
javascriptMode = JavascriptMode.unrestricted才會生效。 -
initialMediaPlaybackPolicy: 媒體播放設置，默認為
AutoMediaPlaybackPolicy.require_user_action_for_all_media_types。- AutoMediaPlaybackPolicy.require_user_action_for_all_media_types:需要用戶同意后才可以使用媒體播放器。
- AutoMediaPlaybackPolicy.always_allow:總是允許播放媒體。
allowsInlineMediaPlayback: 控制IOS是否允許在HTML5上嵌入媒體播放器，在Android上默認允許。
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()
}
loadUrl : 加載新頁面
currentUrl : 獲取當前URL
canGoBack : 是否可以回退
canGoForward : 是否可以前進
goBack : 回退（如果不可回退，就不執行任何操作）
goForward : 前進（如果不可前進，就不執行任何操作）
reload : 重新加載/刷新
clearCache : 清除緩存
evaluateJavascript : 調用
JavaScript方法，已過時，使用runJavascript/runJavascriptReturningResult代替runJavascript : 無返回值的調用
JavaScript方法runJavascriptReturningResult : 有返回值的調用
JavaScript方法getTitle : 獲取HTML標題
scrollTo : 滑動到X、Y位置
scrollBy : 在當前位置上滑動X、Y長度
getScrollX : 獲取X軸滑動長度，單位:pixels
getScrollY : 獲取Y軸滑動長度，單位:pixels
3. Cookie
Cookie目前只支持刪除，方法有以下兩個：
WebView.platform.clearCookies();CookieManager().clearCookies();
四. WebView與JS交互
1. Flutter調用JS方法
JS代碼如下，分別有一個無返回值和一個有返回值的方法。
<script>
function flutterCallJsMethod(message){
alert(message);
return "我是JS返回的Result";
}
function flutterCallJsMethodNoResult(message){
alert(message);
}
</script>
Flutter端調用代碼如下:
///調用有返回值JS方法，并打印結果
_controller
.runJavascriptReturningResult(
"flutterCallJsMethod('Flutter調用了JS')")
.then((value) {
Fluttertoast.showToast(msg: value.toString());
});
///調用無返回值JS方法
_controller
.runJavascript("flutterCallJsMethodNoResult('Flutter調用了JS')");
evaluateJavascript：方法已經棄用。
2. JS調用Flutter方法
Flutter提供了簡單的支持JS調用的方法和參數，也可以通過修改Plugin實現自定義方法和參數。
2.1 默認方法
Flutter端代碼如下
WebView(
...
javascriptMode: JavascriptMode.unrestricted,
javascriptChannels: {
JavascriptChannel(
name: "toast",
onMessageReceived: (message) {
String result = message.message;
...
}),
},
...
)
javascriptChannels:表示JS可以調用Flutter的對象集合
name:表示映射的對象名
onMessageReceived:為JS傳過來的參數
以上代碼在Android端的實現為
webView.addJavascriptInterface(new JsInterface(), "toast");
...
public class JsInterface {
@JavascriptInterface
public void postMessage(String message) {
...
}
}
JavaScript調用代碼如下
<script>
function jsCallFlutter(){
toast.postMessage("JS調用Flutter postMessage");
}
</script>
name:toast : 這個值是三端公共定義的。
postMessage : 這個方法是Flutter Plugin內部默認定義好的一個方法。之所以叫這個名字是為了更好的兼容IOS。
IOS WebKit提供了一個默認的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 自定義方法和參數
自定義方法名和參數，需要修改Plugin代碼。
JS端代碼如下
<script>
function jsCallFlutter2(){
jscomm.toLocalEvent("JS調用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端的實現為
webView.addJavascriptInterface(new JsInterface(), "jscomm");
...
public class JsInterface {
@JavascriptInterface
public void toLocalEvent(String event,String data) {
}
}
修改Flutter Plugin代碼:JavaScriptChannel.java
//默認實現的方法
@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);
}
}
注意：這個新增的
toLocalEvent方法，修改的是本地緩存代碼，不能提交到Git上，也就是說只有修改的那個人運行的代碼有效！
以上就是這次分享的全部了，切記修改的Plugin代碼不會被提交，如果示例代碼無法運行，仔細看文檔。
