近期要做一个安卓端的原生应用程序。情况是这样的：需求方原先已经实现了网页，是一个工具类应用，大致作用是连接到他们公司生产的硬件，然后通手机与智能硬件通信来对硬件进行一系列控制。不过呢，这个网页先前是由工程师完成的，使用方式都是指令式的（比如连接服务器需要输入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里可用的组件有： - `````` 最基本的容器标签。和HTML中的```
```相似，不过不能在里面直接添加文本，而要用``````标签。 推荐自定义一个组件时在外层用一个```