淺析WindVane技術

一、WindVane介紹

WindVane是阿里巴巴前端團隊推出的一款開源的Hybrid框架解決方案，目前已被廣泛應用於阿里旗下的各種App中，例如淘寶、支付寶等等。

WindVane根據業務場景的不同，提供了WebView JavaScript Bridge（WVJB）、NativeService、NativeUi、NativeEvents 等多種功能模塊。其中，WVJB是WindVane中最核心的模塊，可以使得WebView和Native之間進行雙向的數據通訊。

二、WVJB模塊

1、實現原理

WVJB模塊的實現原理是基於WebView的JavaScriptCore框架和Native的HTTP協議。當WebView端需要向Native端發送請求時，WVJB會在WebView中注入一個全局變量“WindVane”，JavaScript代碼就可以通過該全局變量來調用Native方法。一旦Native端接收到該請求，就會解析HTTP協議，讀取其中的參數，並進行相應的處理。

例如，當WebView需要獲取Native端的位置信息時，可以通過WindVane來發送一個請求：

WindVane.call('Location.getUserLocation', {}, function(resp) {
  alert(resp);
});

當Native端接收到該請求時，會進行相應的處理，並將結果通過HTTP協議返回給WebView：

@Path("/api/sys/Location/getUserLocation")
public class GetUserLocation extends WVApiPlugin {
  @Override
  public boolean execute(String... params) {
    WVCallBackContext context = getCallbackContext(params);
    LocationManager locationManager = (LocationManager) getSystemService(Context.LOCATION_SERVICE);
    String provider = locationManager.getBestProvider(new Criteria(), true);
    Location location = locationManager.getLastKnownLocation(provider);
    if (location != null) {
      JSONObject jsonObject = new JSONObject();
      try {
        jsonObject.put("longitude", location.getLongitude());
        jsonObject.put("latitude", location.getLatitude());
        context.success(jsonObject);
      } catch (JSONException e) {
        e.printStackTrace();
      }
    } else {
      context.error("Can not get location info");
    }
    return true;
  }
}

2、使用示例

在集成WindVane框架後，可以通過以下方式來調用Native方法：

WindVane.call('NativeModule.methodName', params, callback);

其中，’NativeModule.methodName’代表Native模塊的名字和方法名，params是需要傳給Native方法的參數，callback是回調函數，用於接收Native方法執行的結果。Native方法的名字和參數需要在Native端事先註冊。

比如，當WebView需要調用Native的獲取用戶信息的方法時，可以通過以下方式來實現：

WindVane.call('User.getUserInfo', {}, function(resp) {
  alert(resp);
});

三、NativeService模塊

NativeService模塊是WindVane中提供的另一個核心模塊，用於管理Native與WebView之間的數據傳輸，例如：Cookie、Cache、文件上傳下載、圖片加載等。

NativeService模塊主要包含以下幾個子模塊：

• HybridCache：支持在線和離線緩存，可以控制是否清除緩存。
• HybridCookie：支持Cookies管理。
• HybridFileUpload：支持文件上傳，包括多文件上傳和斷點續傳。
• HybridFileDownload：支持文件下載，包括多塊分段下載和斷點續傳。
• HybridImage：支持圖片加載，包括緩存、壓縮和裁剪。

NativeService模塊的使用示例如下：

//設置Cooke
WindVane.getService("HybridCookie").setCookie(name, value);

//獲取Cookie
WindVane.getService("HybridCookie").getCookie(url);

//文件上傳
WindVane.getService("HybridFileUpload").upload({
  url: "http://example.com/upload",
  files: [{name: "file1", path: "/sdcard/file1.jpg"}, {name: "file2", path: "/sdcard/file2.jpg"}]
}, function(resp) {
  alert(resp);
});

//文件下載
WindVane.getService("HybridFileDownload").download({
  url: "http://example.com/file.jpg",
  filePath: "/sdcard/file.jpg",
  start: 0,
  end: -1
}, function(resp) {
  alert(resp);
});

//圖片加載
WindVane.getService("HybridImage").loadImage({
  url: "https://example.com/image.jpg",
  cache: true,
  compress: 60,
  crop: [0, 0, 100, 100]
}, function(resp) {
  alert(resp);
});

四、NativeUi模塊

NativeUi模塊是WindVane中提供的UI組件，包括：Toast、Dialog、Loading、PopMenu 等。

NativeUi模塊的使用示例如下：

//Toast
WindVane.getService("NativeUi").toast({
  message: "Hello WindVane",
  duration: 2000
});

//Dialog
WindVane.getService("NativeUi").alert({
    title: "Title",
    message: "Message",
    button: "OK"
}, function() {
  alert("OK clicked");
});

//Loading
var loading = WindVane.getService("NativeUi").showLoading({
  message: "Loading"
});

setTimeout(function() {
  loading.hide();
}, 3000);

//PopMenu
WindVane.getService("NativeUi").showPopMenu({
  items: [{title: "Menu1", action: "menu1"}, {title: "Menu2", action: "menu2"}]
}, function(action) {
  alert(action);
});

五、NativeEvents模塊

NativeEvents模塊是WindVane中提供的事件管理器，用於管理Native和WebView之間的事件通知交互。

NativeEvents模塊主要包含以下幾個方法：

• on(eventName, callback)：註冊事件監聽器。
• once(eventName, callback)：註冊只觸發一次的事件監聽器。
• off(eventName, callback)：註銷事件監聽器。
• trigger(eventName, params)：觸發事件。

使用示例：

//註冊事件監聽器
WindVane.getService("NativeEvents").on("Event1", function(params) {
  alert(params);
});

//觸發事件
WindVane.getService("NativeEvents").trigger("Event1", {param1: "Hello", param2: "WindVane"});

六、總結

綜上所述，WindVane是一個非常優秀的Hybrid解決方案，適用於各種App的開發，可以幫助開發者快速搭建Hybrid框架，實現WebView和Native之間的雙向通訊、數據傳輸、UI組件、事件管理等。我們希望通過本文的介紹，可以讓大家更好地使用WindVane，最終實現更好的業務需求。