Weex 是什么

Weex is a extendable cross-platform solution for dynamic programming and publishing projects.
Weex是针对动态编程和发布项目的一个可扩展、跨平台的解决方案。

这是来自Weex Document的介绍。这句话个人感觉还是非常有诱惑力的。为什么？击中移动端开发两个痛点。

1. 动态编程＋发布。Weex能做到随时编程发布到服务端，应用端即时更新。想想以前，应用开发－测试－发布，多么繁琐和耗时的一个流程，万一线上出了bug，那真是痛不欲生，尤其时用户量上百万千万的应用，老板连杀你的心都有。但是有了Weex就不一样了。修复bug，用户都是无感知的（老板也是无感知的，哈哈哈）。
2. 跨平台。这是移动端无数人向往的和为之努力的事。一处编写，到处运行。Weex支持Android，iOS，Web三大平台，一份代码，三个平台通用。等到有一天，Weex真的发展强大起来，公司成本估计可以节省不少。会不会一个Weex开发人员拿三份工资呢？（估计是我想太多😂）

github地址:[https://github.com/alibaba/weex(https://github.com/alibaba/weex)

Meet weex

• Install Weex Playground App to see examples we already written.
• If you want to write a demo, install weex-toolkit in Node.js 4.0+ and
• Run weex init to generate & start a simple project in an empty folder.
• Follow the instructions in the project README.
• Enjoy it.
  安装Playground.apk到手机端，如果你想写一个demo，安装weex-toolkit在Node.js 4.0+环境的基础上，用weex生成并启动一个简单的工程在一个文件夹中。详情请查看README

For android

Prerequisites

• Install Node.js 4.0+
• Under project root
  -- npm install, install project
  -- ./start
• Install Android Environment

Run playground, In Android Studio

• Open android/playground
• In app/java/com.alibaba.weex/IndexActivity, modify CURRENT_IP to your local IP
  Click (Run button)

Add an example

综上所述，首先需要安装node.js4.0+环境。然后安装weex-toolkit工具生成.we文件，使用Playground.apk进行扫一扫安装到手机端进行调试。
也可以使用weex-devtools(android)使用chrome浏览器进行调试
官方中文版本环境搭建及demo运行Weex快速上手教程(Weex Tutorial)
weex启动及界面渲染流程图
初始化过程

初始化过程png
启动调用过程
启动调用过程.png
效果果然达到了write once，run everywhere！而且运行效果可以与原声媲美，并且virtual dom的加入更加优化了性能问题，切对native扩展等提供了很好的预留，目前可以采用组件形式与全页形式进行集成。

初始化操作

1. BaseApplication 初始化SDK 引擎
WXSDKEngine.init(this, null, null, new ImageAdapter(), null);
WXSDKEngine初始化了三件事：

1、初始化so库文件，渲染逻辑、脚本业务框架等都封装在了这里；

2、初始化initScriptsFramework ： 初始化脚本框架；

3、register 操作，初始化weex组件与module；

        Rect outRect = new Rect();
        getWindow().getDecorView().getWindowVisibleDisplayFrame(outRect);
        if (instance != null) {
            instance.destroy();
            instance = null;
        }
        instance = new WXSDKInstance(this);
        instance.registerRenderListener(this);
        Map<String, Object> options = new HashMap<>();
        options.put("bundleUrl", WEEX_INDEX_URL);
        instance.renderByUrl(TAG, WEEX_INDEX_URL, options, null, ScreenUtil.getDisplayWidth(this),
                             ScreenUtil.getDisplayHeight(this), WXRenderStrategy.APPEND_ASYNC);
    }```
首先看这个方法，可以在activity oncreate中被调用，可以清楚的看到，注册了渲染监听器，以及传入了当前屏幕的宽高及url，可以猜测weex的适配方案采用的是百分比方案。
**2. WXSDKInstance **
  renderByUrl 方法内调用了httpadapter进行加载url，并且拼装了user-agent header参数；
**3. DefaultWXHttpAdapter** 
网络处理 其实就是一个封装的简单的网络请求工具类，把请求下来的json数据回调给WXSDKInstance
**4. WXSDKInstance **render 方法进行view的创建初始化
**5. WXSDKManager** createInstance
1、将json数据与instanceId添加到renderManager中；
 2、使用bridge桥接管理器进行UI绘制；
**6. WXBridge 作用**：  execJS 调用 so库方法执行JS脚本，进行UI渲染；

最后提供与React Native的比较：
挺好的问题： 
1. DSL 语法差异很大，可能 weex 更轻量一些，上手快一些； 
2. Native 性能 weex 还是有一些优势的，包也更小。 

weex平台一致化看起来比较牛掰，，，，，
___
Android历练记  是一个关于Android最新技术探讨，包含安全，架构，Android技术开发，ui绘制，源码解析等领域，如果你有兴趣，我们可以一起讨论学习，
关注微信公众号  **Android历练记** 或扫一扫二维码：


![Android历练记](http:https://img.haomeiwen.com/i2333435/325a261b819900ae.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)