浅析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://www.mobiletrain.org/2023/1122/1700611101730.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，最终实现更好的业务需求。