weex for android 系列之引导篇

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初始化了三件事：

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

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

三、register 操做，初始化weex组件与module；
private void renderWX() {
        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
一、将json数据与instanceId添加到renderManager中；
二、使用bridge桥接管理器进行UI绘制；
6. WXBridge 做用：  execJS 调用 so库方法执行JS脚本，进行UI渲染；

最后提供与React Native的比较：
挺好的问题：

1. DSL 语法差别很大，可能 weex 更轻量一些，上手快一些；

2. Native 性能 weex 仍是有一些优点的，包也更小。

weex平台一致化看起来比较牛掰，，，，，

本文分享自微信公众号 - 喘口仙氣（gh_db8538619cdd）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。