Weex的體驗和環境搭建

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 .