weex 项目搭建

weex 官网地址：http://weex.apache.org/cn/guide/

1，weex 简介

1. Weex 是一个使用 Web 开发体验来开发高性能原生应用的框架。
2. Weex 致力于使开发者能基于当代先进的 Web 开发技术，使用同一套代码来构建 Android、ios 和 Web 应用。具体来讲，在集成了 WeexSDK 之后，你可以使用 JavaScript 和现代流行的前端框架来开发移动应用。
3. Weex 的结构是解耦的，渲染引擎与语法层是分开的，也不依赖任何特定的前端框架，目前主要支持 Vue.js 和 Rax 这两个前端框架。
4. Weex 的另一个主要目标是跟进当代先进的 Web 开发和原生开发的技术，使生产力和性能共存。在开发 Weex 页面就像开发普通网页一样；在渲染 Weex 页面时和渲染原生页面一样。

2，搭建 weex 开发环境

1. 安装 node.js
2. 全局安装weex-toolkit：npm install -g weex-toolkit
3. 下载 weex 模板：weex init myProjectName
4. 进入项目的文件目录：cd myProjectName
5. 安装依赖：npm install
6. 初始化 iOS 和 Android 项目：weex platform add ios 和 weex platform add android
7. 启动项目：npm start

3，手机上安装 Weex Playground App，打开软件后扫描二维码便可预览项目在手机中展示的效果。

4，weex 开发时的注意事项

(1) 适配和缩略

1. Weex 对于长度值目前只支持像素值，不支持相对单位（em、rem）；适配以750px标准。
2. 设定边框，border目前不支持类似这样 border: 1px solid #ff0000;的组合写法。
3. 设定背景色，background 目前不支持类似这样background: red，需要修改为具体的background-color: red。

(2) 定位

1. weex支持position定位，relative | absolute | fixed | sticky ，默认值为relative。
2. weex目前不支持z-index设置元素层级关系，但靠后的元素层级更高，因此，对于层级高的元素，可将其排列在后面。
3. 如果定位元素超出容器边界，在Android下，超出部分将不可见，原因Android端元素overflow 默认值为hidden。
4. weex支持线性渐变linear-gradient，不支持radial-gradient径向渐变。
5. weex中box-shadow仅仅在IOS中有效
6. 组件目前无法定义一个或几个角的border-radius，只对ios有效，对Andriod无效。
7. weex中，flexbox是默认并且唯一的布局模型，每个元素都默认拥有display: flex 属性