weex源码浅析(Android部分)一

最近预研阿里的weex方案,同最近比较火的ReactNative比较类似,提供了一个一次编写三端共用的解决方案.

下面引用官方的描述

Weex 是一套简单易用的跨平台开发方案，能以 web 的开发体验构建高性能、可扩展的 native 应用，为了做到这些，Weex 与 Vue 合作，使用 Vue 作为上层框架，并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API，这样一来，你甚至可以使用其他框架驱动 Weex，打造三端一致的 native 应用。

weex的语法借鉴了vue.js的语法,保留了MVVM的结构.具体语法官方链接:语法介绍

这里直接跳过关于weex的官方控件介绍以及绑定原理,具体的细节和实践步骤准可参考上面的链接.

我们直接来看这张图,这张图很清晰地描述了weex的工作原理.

Weex we 文件 ————–前端(we源码)
↓ (转换) ——————前端(构建过程)
JS Bundle —————–前端(JS Bundle代码)
↓ (部署) ——————服务器
在服务器上的JS bundle —-服务器
↓ (编译) —————— 客户端(JS引擎)
虚拟 DOM 树 ————— 客户端(Weex JS Framework)
↓ (渲染) —————— 客户端(渲染引擎)
Native视图 ————— 客户端(渲染引擎)

• Transformer（转换器): 一个Node JS工具， 转换Weex源码为JS Bundle
• Weex JS Framework(JS框架):运行于客户端的的JS框架，管理着Weex实例的运行。Weex实例由JS Bundle创建并构建起虚拟DOM树. 另外，它发送/接受 Native 渲染层产生的系统调用，从而间接的响应用户交互。
• Native引擎: 在不同的端上，有着不同的实现: iOS/Android/HTML5. 他们有着共同的组件设计, 模块API 和渲染效果. 所以他们能配合同样的 JS Framework 和 JS Bundle工作。

JS Bundle是由.we文件编译而成的js文件,weex js framenwork是基于chrome v8的js引擎,负责把js bundle解析成Vm Dom(json格式描述),作为js和native之间沟通的桥梁,主要的两个方法callJs()和callNative().

下面着重讲下android端的渲染过程,以官方的playground 作为demo工程.

weex的使用需要在Application中配置,序列图如下

WXApplication中调用WXSDKEngine初始化

WXSDKEngine.initialize(this,
                           new InitConfig.Builder()
                               //.setImgAdapter(new FrescoImageAdapter())// use fresco adapter
                               .setImgAdapter(new ImageAdapter())
                               .setDebugAdapter(new PlayDebugAdapter())
                               .build()
                          );

WXSDKEngine.initialize()的第二个参数以链式的方式设置一系列自定义的adapter,包括网络请求,图片加载,数据埋点之类,某些adapter,weex提供了基础版本的实现,另外一些默认为空.

initialize紧接着进入 doInitInternal,这里

 private static void doInitInternal(final Application application,final InitConfig config){
    WXEnvironment.sApplication = application;
    WXEnvironment.JsFrameworkInit = false;

    //调用WxBridgeManager post 
    WXBridgeManager.getInstance().post(new Runnable() {
      @Override
      public void run() {
        long start = System.currentTimeMillis();
        WXSDKManager sm = WXSDKManager.getInstance();
        //如果没有自定义Adapter,则初始化为默认实现
        if(config != null ) {
          sm.setIWXHttpAdapter(config.getHttpAdapter());
          sm.setIWXImgLoaderAdapter(config.getImgAdapter());
          sm.setIWXUserTrackAdapter(config.getUtAdapter());
          sm.setIWXDebugAdapter(config.getDebugAdapter());
          sm.setIWXStorageAdapter(config.getStorageAdapter());
          if(config.getDebugAdapter()!=null){
            config.getDebugAdapter().initDebug(application);
          }
        }
        //加载V8.so库
        WXSoInstallMgrSdk.init(application);
        boolean isSoInitSuccess = WXSoInstallMgrSdk.initSo(V8_SO_NAME, 1, config!=null?config.getUtAdapter():null);
        if (!isSoInitSuccess) {
          return;
        }
        //初始化js Framework, weex_sdk下assets/main.js文件
        sm.initScriptsFramework(config!=null?config.getFramework():null);

        WXEnvironment.sSDKInitExecuteTime = System.currentTimeMillis() - start;
        WXLogUtils.renderPerformanceLog("SDKInitExecuteTime", WXEnvironment.sSDKInitExecuteTime);
      }
    });
    //注册 componnet, moudle
    register();
  }

下面跟一下initScriptsFramework().通过handler post message 到WXBridgeManager中,核心代码如下

framework = WXFileUtils.loadAsset("main.js", WXEnvironment.getApplication());

//调用libs/libweexv8.so中的native方法
if(mWXBridge.init