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的单文件组件相同，即<template> </template> <script></script> <style></style>。
weex的解决方案和我起初所想的并不同，并非向原生应用插入一个html页面。weex中写JS和在Web中写JS的区别主要有：

• weex环境中没有DOM（DOM是js操做html的接口，是Web中的概念）。因为原生环境不支持Web API，其余一些Web API，如ELement、Event、File等也没法使用，具体可看MDN上的Web API列表。
• 虽然不存在DOM对象，可是weex实现了一套Native DOM API，这套接口与HTML DOM API很是接近，同时weex中的VUE也是基于此来进行适配的。
• 没有BOM对象（浏览器对象模型）,因此没有window、screen、document、history、location、navigator等对象。同时像document.getElementById这类选择元素的方法也就没法使用。
• weex的运行环境以原生应用为主，在Android和iOS环境中渲染出来的是原生的组件，而不是DOM元素。
• weex支持绑定事件，本质上是由原生组件捕获并触发的，所以行为和浏览器不一样，同时只支持有限几类事件，也不区分事件的捕获的冒泡阶段（weex2.0已经实现了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布局教程。
• position属性除了relative、absolute、fixed外，还有stiky，意为仅当元素滚动到页面元素外时，元素会固定在页面窗口的顶部。
• weex不支持z-index，但靠后的元素层级更高，能够经过排列元素出现顺序来调整层级。
• Weex 支持四种伪类：active, focus, disabled, enabled全部组件都支持 active, 但只有 input 组件和 textarea 组件支持focus,enabled, diabled。
• weex支持渐变，不过如今只支持两种颜色的渐变。
  按weex文档所说，能够以以下顺序规划weex的样式：

1. 全局样式规划：将整个页面分割成合适的模块。
2. flex 布局：排列和对齐页面模块。
3. 定位盒子：定位并设置偏移量。
4. 细节样式处理：增长特定的具体样式。

内建组件

虽然weex可使用HTML和CSS中的一些标签，但实际上应该是对原生组件的封装，而非HTML元素。可用的Web标准包括HTML、CSS、JS等的API可看这里。
weex里可用的组件有：

• <div> 最基本的容器标签。和HTML中的<div>类似，不过不能在里面直接添加文本，而要用<text>标签。 推荐自定义一个组件时在外层用一个<div>做为根容器。
• <a> 组件定义了指向某个页面的超链接。它和HTML中的<a>标签相似，区别是不能直接在里面添加文本，而是要再嵌套一层<text>。同时它还支持全部通用样式包括flexbox、position等，这与HTML中的<a>标签彻底不一样。
• <text> 用于渲染文本，能够用{{}}来插入变量值。 能够用line="3"来指定文本为三行。
• <textarea> 能够看成是容许多行的<input>标签。用row=3来设置高数限制。
• <video>和<image>用来插入媒体。
• <web>用于在weex页面中嵌入一张网页内容，和HTML中的<iframe>做用相似。
• <switch> 相似iPhone中飞行模式的按钮。
• <input>
• <list>垂直列表功能的组件，<cell>为其子组件。
• <scroll> 内部子组件可滚动的容器。
• <slider>轮播图，<indicator>为指示器。
• <loading>上拉加载功能。<refresh>下拉刷新功能。不过都须要是<scroll>和<list>的子组件才能被正确渲染。

内建模块

weex里的模块应该也是对原生开发语言的一些方法或是库的引用或封装。好比若是要引用dom模块，须要用const dom=weex.requireModule('dom')的方式加载。可用的模块有：

• animation动画效果。使用方法为animation.transition(el,options,callback)。el为对元素的引用，不过须要经过vue中的this.refs.element来引用。option是过渡效果的时间、样式变化等的配置项，callback为回调函数。
• picker用于数据选择、日期选择、日间选择等。pick(options,callback)。
• WebSocket
• clipboard模块用getString(callback)、setString(callback)来从系统的粘贴板中获取内容或者是设置内容。
• dom。目前来讲除了scrollToElement(node,options)没有其余用处。
• modal用于展现消息框如toast、alert、confirm、prompt等。
• navigator用于切换页面，同时能够指定动画效果。
• storage与前端的数据存储相似，不过没有大小的限制。
• stream用于实现网络请求。使用为fetch(options, callback[,progressCallback])。
• webview模块，用于配合<view>组件使用的。
• globalEvent为全局事件模块，不过就算原生JS中Event事件对象我也不多用到。

其余

固然weex还有其余一些重要接口，不过没有移动应用开发经验的我不是很理解。JS Service是很是强大也很危险的功能，须要有必定的移动开发的经验。若是开发者水平足够的话，还能够扩展JS framework。为了方便调试还能够把Devtools集成到Android应用中。
——————————————
2017-10-10 上个月完成了一个钉钉微应用，是用weex写的原生应用，功能较简单，不过这番体验着实有趣~