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 .