WEEX 是阿里推送的一款基于Node.js,轻量级的移动端跨平台动态性技术解决方案,用于构建原生的速度的跨平台APP.

1. 搭建WEEX环境

1.1 首先下载安装Node.js,MAC版下载

1.2 安装 weex-toolkit(WEEX工具包)

终端执行

sudo npm install -g weex-toolkit

执行后需要输入你电脑的密码.

1.3 验证是否安装成功

终端执行

weex

显示

info

Usage: weex foo/bar/we_file_or_dir_path [options]

Usage: weex init

选项：

--qr display QR code for native runtime, default action [boolean]

-o, --output transform weex we file to JS Bundle, output path must specified

(single JS bundle file or dir)

[for create sub cmd]it specified we file output path

[默认值: "no JSBundle output"]

--watch using with -o , watch input path , auto run transform if change

happen

-s, --server start a http file server, weex .we file will be transforme to JS

bundle on the server , specify local root path using the option

[string]

--port http listening port number ,default is 8081 [默认值: -1]

--wsport websocket listening port number ,default is 8082 [默认值: -1]

--np do not open preview browser automatic [boolean]

-f, --force [for create sub cmd]force to replace exsisting file(s) [boolean]

--help 显示帮助信息 [boolean]

-h, --host [默认值: "127.0.0.1"]

for example & more information visit https://www.npmjs.com/package/weex-toolkit

表明安装成功.

2. 安装weex的编辑工具

如果使用Xcode编辑weex,没有格式也没有高亮和提示,我们需要使用一个编辑工具来快速的编写weex的代码.

2.3 添加高亮脚本 sublime Text 导航栏里选择Tools->Developer->New Syntax

Snip20160715_3.png

2.4 下载好的weex高亮脚本文件打开,把内容拷贝到新建的文件中,覆盖原有的内容. 然后cmd + s保存,把名称命名为Plain we.sublime-syntax,请注意文件名称必须命名为Plain we.sublime-syntax,否则没有高亮.

2.5 开启weex语法高亮

Snip20160715_4.png

3. 来一个简单的Demo玩玩.

3.1 制作一个简单的weex文件

我们来做一个列表,现在只包含一个Cell,cell内部只有一个图片,图片右边是一个文本.

.thumb { width: 100; height: 100; }

.title { text-align: center; flex: 1; color: grey; font-size: 25; }

把上面的文本拷贝到编译器中,cmd + s 保存你想保存的位置,命名为list.we,其中we是weex文件的后缀.

3.2 预览

打开终端,cd 到 list.we 所在的目录,执行

weex list.we

weex 工具会启动服务器,把list.we转换为html5的页面,然后在浏览器中把它打开. 效果如图

Snip20160715_5.png

你可以改变上面的元素来查看不同的效果.

3.2 weex 语法简介

一个WEEX文件由三部分组成,分别为template,style,script;其中template是骨架,类似于HTML标签,style负责渲染,类似于css, script负责交互事件,类似于javascript

template 由标签组成,标签用于包裹内容.weex包含两种类型的标签,分别为开放标签和闭合标签 开放标签由一对标签组成如内容 闭合标签,只有一个标签如 标签上可以有多个属性,不同的属性代表不同的含义.比如:class属性用于定义标签的样式. onclick 属性让标签响应点击事件.

Style 用于描述标签如何展示,语法与css类似,weex支持大部分css的特征,比如margin,padding,fixed等,更令人兴奋的是weex支持flexbox的布局.

Script 用于个标签设置数据和添加逻辑,让我们更加简单的绑定本地或远程的数据和更新标签. 我们可以定义函数来处理tag上的事件. Script 类似于通用的CommonJS的模型.