weex入门
近期要做一个安卓端的原生应用程序。情况是这样的：需求方原先已经实现了网页，是一个工具类应用，大致作用是连接到他们公司生产的硬件，然后通手机与智能硬件通信来对硬件进行一系列控制。不过呢，这个网页先前是由工程师完成的，使用方式都是指令式的（比如连接服务器需要输入link server，发送信号需要send signal）。嗯，这很程序员。这反人性的操作让使用人员用了不久就深恶痛绝，正好又有需求上的变更，于是他司决定重写页面，同时为了方便员工的使用需要以安卓app的形式完成。
然而我只是个JSer啊！不过万能的JS表示移动端应用了也是小Case。本来我就一直对RN很感兴趣，但是现在时间紧迫，React Native的入门成本高，所以先尝试使用阿里的weex方案，待以后时机合适再学习RN的使用。
计划先过一遍weex的文档，然后研究weex团队写的移动端原生应用weex-hackernews，配合使用weex-pack、Weex Playground、weex-toolkit来开发安卓APP。另外还有weex.help和weex学院这两个社区供weex开发者交流学习（浏览了一些帖子之后感叹weex的强大，于是坚定了我后期学习RN的决心）。
用weex开发安卓APP需要安装Android Studio，同时我装了安卓模拟器来测试。
以下主要我是对weex官方文档的梳理。
weex文档学习
weex是跨平台解决方案，可以用JS开发高性能、可扩展的 native 应用。早先weex自身有一套语法规则，与Vue有些相近，现在weex已与Vue合作，使用Vue作为上层框架，同时一些Vue插件如Vue-Router等也可以使用。很好奇weex+vue会碰撞出怎样的火花。
与Web开发的差异
由于weex已与Vue合作，因此写法上与Vue的单文件组件相同，即“““。
weex的解决方案和我起初所想的并不一样，并不是向原生应用插入一个html页面。weex中写JS和在Web中写JS的区别主要有：
– weex环境中没有DOM（DOM是js操作html的接口，是Web中的概念）。由于原生环境不支持Web API，其他一些Web API，如ELement、Event、File等也无法使用，具体可看MDN上的[Web API列表][list]。
– 虽然不存在DOM对象，但是weex实现了一套[Native DOM API][dom]，这套接口与HTML DOM API非常接近，同时weex中的VUE也是基于此来进行适配的。
– 没有BOM对象（浏览器对象模型）,所以没有window、screen、document、history、location、navigator等对象。同时像document.getElementById这类选择元素的方法也就无法使用。
– weex的运行环境以原生应用为主，在Android和iOS环境中渲染出来的是原生的组件，而不是DOM元素。
– weex支持绑定事件，本质上是由原生组件捕获并触发的，因此行为和浏览器不同，同时只支持有限[几类事件][event]，也不区分事件的捕获的冒泡阶段（[weex2.0][bubble]已经实现了W3C标准的事件冒泡机制，不过为了兼容旧版本，需要在根元素属性在加上“`bubble=”true”“`来开启）。
– 能调用移动设备的原生API，使用方法是通过注册、调用模块来实现。其中有一些模块是 Weex 内置的，如 clipboard、navigator、storage等。
CSS的差异
– 为了加强性能，weex不允许使用简写属性。比如“`border: 1px solid #ddd“`这样的CSS样式需要拆分成“`border-style“`、“`border-color“`等。
– weex同样基于盒模型，不过默认“`box-sizing“`为“`border-box“`。
– 长度只支持像素值，不支持em、rem这样的相对单位。
– 选择器只支持单个class或者id，而不支持后代选择器、属性选择器等。
– weex默认且唯一的布局模型为“`flex“`，因此是靠“`flex-direction“`、“`align-items“`等css属性来布局。可以看看阮一峰的[flex布局教程][flex]。
– “`position“`属性除了“`relative“`、“`absolute“`、“`fixed“`外，还有“`stiky“`，意为仅当元素滚动到页面元素外时，元素会固定在页面窗口的顶部。
– weex不支持“`z-index“`，但靠后的元素层级更高，可以通过排列元素出现顺序来调整层级。
– Weex 支持四种伪类：“`active“`, “`focus“`, “`disabled“`, “`enabled“`所有组件都支持 “`active“`, 但只有 “`input“` 组件和 “`textarea“` 组件支持“`focus“`,“`enabled“`, “`diabled“`。
– weex支持渐变，不过现在只支持两种颜色的渐变。
按weex文档所说，可以以如下顺序规划weex的样式：
- 全局样式规划：将整个页面分割成合适的模块。
- flex 布局：排列和对齐页面模块。
- 定位盒子：定位并设置偏移量。
- 细节样式处理：增加特定的具体样式。
内建组件
虽然weex可以使用HTML和CSS中的一些标签，但实际上应该是对原生组件的封装，而非HTML元素。可用的Web标准包括HTML、CSS、JS等的API可看[这里][standard]。
weex里可用的组件有：
– “`