Weex學習第二篇：Hello world

曾經什麼時候，我覺得學習一門語言或者是新技術，只要能寫出Hello world，就算是學會了。這個思想困擾了我好久，以致於以前整理電腦的時候發現php，python，ruby，phonegap，react native，go，node.js，.net這些文件夾中都是隻有hello world的代碼，很是慚愧。

可是不能否認的是，Hello world是一個好的開始。

輸出Hello world有兩種方式：
1.是在線調試 http://dotwe.org/
2.本地搭建環境開發

下面來介紹一下官方本地開發的步驟：
第一步：安裝依賴

首先，你須要 Node.js 和 weex-toolkit。

安裝 Node.js 方式多種多樣，最簡單的方式是在 Node.js 官網 下載可執行程序直接安裝便可。

對於 Mac，可使用 Homebrew 進行安裝：

brew install node
更多安裝方式可參考 Node.js 官方信息

安裝完成後，可使用如下命令檢測是否安裝成功：

$ node -v
v6.3.1
$ npm -v
3.10.3
一般，安裝了 Node.js 環境，npm 包管理工具也隨之安裝了。所以，直接使用 npm 來安裝 weex-toolkit。

npm 是一個 JavaScript 包管理工具，它可讓開發者輕鬆共享和重用代碼。Weex 不少依賴來自社區，一樣，Weex 也將不少工具發佈到社區方便開發者使用。

$ npm install -g weex-toolkit
國內開發者能夠考慮使用淘寶的 npm 鏡像 —— cnpm 安裝 weex-toolkit

$ npm install -g cnpm
$ cnpm install -g weex-toolkit
提示：

若是提示權限錯誤（permission error），使用 sudo 關鍵字進行安裝

$ sudo cnpm install -g weex-toolkit
安裝結束後你能夠直接使用 weex 命令驗證是否安裝成功，它會顯示 weex 命令行工具各參數：

第2步：建立文件

如今能夠開始編寫代碼了。首先，咱們建立一個 .we 文件（Weex 程序的文件後綴（擴展名）是 .we）。

打開空白的 hello.we 文件，輸入三個標籤，內容爲：

<template>
</template>

<style>
</style>

<script>
</script>
咱們在 Get started 裏已經介紹過 Weex 基本的代碼結構：<template>、<style>、<script> 分別對應於 Web 中的 HTML，CSS（<style> 標籤），JavaScript（<script> 標籤）。

其實，上面的代碼就是最簡單的 Weex 程序。可是 .we 文件是不能直接運行的，這時候須要使用剛纔安裝好的 weex-toolkit。weex-toolkit 會編譯 .we 文件，而且建立靜態服務器。

這裏，使用 weex hello.we 命令編譯該程序。

$ weex hello.we
這時，命令行會作幾件事：

編譯 .we 文件；
啓動熱加載服務；
啓動靜態服務器；
拉起瀏覽器，訪問 http://127.0.0.1:8081/weex_tm...
這時候，已經能夠在瀏覽器預覽 Weex 頁面了。不過此時頁面是空白的，由於 .we 文件中沒有任何實質的內容。

第3步：添加內容

修改 weex.we 文件，向 <template> 標籤中添加內容。具體代碼以下：

<template>
<div>

<text>Hello world</text>

</div>
</template>

<style></style>

<script></script>
保存代碼後，瀏覽器會自動刷新頁面，這時會看到瀏覽器顯示了 「Hello world」。

第4步：添加樣式

如今，對已有的文本內容進行樣式修飾。這裏將文本顏色設置爲紅色，字體大小爲 50 像素。具體代碼以下：

<template>
<div>

<text class="text" style="color: #FF0000;">Hello world</text>

</div>
</template>

<style>
.text{

font-size: 50;

}
</style>

<script></script>
這時候，瀏覽器已經從新載入了頁面。其實，是weex-toolkit開啓了熱加載。能夠看到紅色的 「Hello world」。

注意： Weex 支持經過 style 標籤來設定樣式，也支持內聯樣式風格。 對於數值，無需添加任何單位（包括 px、em、rem 等），這是建議的寫法。如需瞭解有哪些通用的樣式，能夠參考 通用樣式。

第5步：預覽

已經在瀏覽器中看到了剛纔的代碼效果，爲了驗證三端是否一致，咱們還需 Playground App 驗證。

這裏，咱們須要爲 weex hello.we 增長 --qr 參數，表示生成二維碼。

$ weex hello.we --qr
而後，使用 Playground 掃碼便可。

mobile_preview

第6步：調試

weex-toolkit 已經集成了 Debugger，只須要使用以下命令便可開啓 Debugger 開關調試 hello.we：

$ weex debug hello.we
咱們輸入以上命令開啓，會自動打開瀏覽器，頁面上有兩個二維碼，第一個是 Debugger Server，第二個是 .we 文件的地址。咱們在 Playground 中先掃第一個，此時瀏覽器會進入一個新的頁面，請你選擇你須要的調試模式：

Debugger：將會打開 js debugger 頁面，您能夠經過 debugger 頁面調試 js（諸如打斷點 查看js log 和查看調用堆棧等信息）；
Inspector：將會打開 inspector 頁面，您能夠經過這個頁面查看 Weex 頁面的 element 屬性結構，包含高亮元素，展現樣式表，以及顯示 native 的 log。同時能夠打開一個遠程的手機鏡像，便於查看界面。另外調試方塊中的 ElementMode 能夠用來選擇 element 樹顯示原始的 native 組件樹仍是顯示面向前端同窗的 DSL （HTML）組件樹。
選擇一種模式後會新開窗口進入調試頁面，這時咱們再掃第二個二維碼便可進入咱們想要調試的頁面進行調試了。

總結：不出意外的話按照官方給出的步驟，均可以輸出hello world。須要注意的是在安裝命令的時候有的須要「sudo + 命令」用管理員權限，不然會報「error file + 路徑」之類的錯誤，意思是沒法在某個路徑下建立文件，或者沒法寫入數據等等。若是以前安裝過npm的話，可能版本須要升級，若是版本過舊不升級直接裝weextoolkit也會報error。

提示：若是實在是作不出來，我的建議仍是能夠略過，由於真正重要的是編程思想，框架的使用和具體API的運用。能夠繼續往下學習，有可能如今不明白的地方，到後面可能就會理解的，由於這只是其中一個方面，當整個過程都完整的學習事後就會有一個大畫面，以前的一些疑惑就是這個大畫面的小缺口，當大畫面清晰後，小缺口天然也就能彌補上。因此建議你們堅持學習，不要放棄，要有專一，專研的精神，同時也要有大局觀，懂得取捨。

參考文章：http://weex-project.io/cn/doc...