Weex的体验和环境搭建

1.单个页面的环境搭建
Weex工具是基于Node.js构建的,所以需要先安装node.js

1) node.js 下载地址：官网 http://www.nodejs.org/download/
node.js的安装网上很多,在这里就不再赘述了
2) 通过终端安装Weex

//windows环境下npm install -g weex-toolkit//mac环境下sudo npm install -g weex-toolkit

在安装结束后，你能通过在命令行窗口执行 weex 命令来检查工具是否安装正确。

我这里是Mac环境:

至此，环境已经全部安装完毕。

2.快速体验

2.1 新建一个 tech_list.we后缀的文件( .we 是Weex推荐的后缀名 )
代码风格和Vue很像

<template>    <div>        <text class="word">HELLO WORLD !</text>    </div></template>  <script></script><style>    .word{        font-size: 100;    }</style>

2.2 通过终端进入新建的 tech_list.we文件目录,输入如下命令

weex tech_list.we

成功后，系统默认浏览器将自动打开以显示如下内容。

2.3 使用Weex Native渲染器来渲染这个文件

通过终端进入新建的 tech_list.we文件目录,输入如下命令

weex tech_list.we --qr -h {ip or hostname}

终端效果如图:

生成的二维码用于手机端 weex 程序的扫描

2.4 安装官方demo：playground.apk

下载apk文件，Weex Playground

安装后打开,可以看到官方的demo,各种炫酷.
回到正题,通过右上角的扫码扫描终端生成的二维码,可以看到刚刚得 tech_list.we文件.

手机效果图:

注意:

Weex完全由原生视图(native view)不是网页(Webkit)来进行渲染的，因此相比Webkit渲染的界面，这个App能获得更快的页面加载速度和更少的内存开销。

另外,你现在可以更改一些 tech_list.we文件的代码,保存更改后,移动端将立即渲染出最新的代码,这种特性,叫做 Hot-Reload .