關于Weex的介紹已經毋須多言，今天，我們帶給大家的是如何快速上手Weex。我們以實例的方式呈現給大家，使用Weex編寫一個簡單的列表，這樣的列表經常能在電商類移動應用中見到。

開始

我們先編寫一個列表項.

<template>

<div class="container" >

<div class="cell">

<image class="thumb" src="http://t.cn/RGE3AJt"></image>

<text class="title">JavaScript</text>

</div>

</div>

</template><style> .cell{margin-top:10 ; margin-left:10 ; flex-direction: row; } .thumb {width: 200; height: 200; } .title {text-align: center ; flex: 1; color: grey; font-size: 50; } </style>

請創建一個名為 tech_list.we 的文件( .we 是Weex推薦的后綴名 ) ，請復制粘貼以上代碼于其中。

因為Weex工具鏈使用Node.js構建，在進行后續步驟前，你需要先安裝 Node.js, 在Node.js安裝成功后,你可以執行下面的命令來安裝Weex命令行程序 Weex Toolkit 。

npm install -g weex-toolkit

在安裝結束后，你能通過在命令行窗口執行 weex 命令來檢查工具是否安裝正確. 僅僅輸入weex并敲擊回車后，你應該看到如下內容顯示：

Usage: weex foo/bar/your_next_best_weex_script_file.we [options]

Options:

--qr display QR code for native runtime,

-o,--output transform weex we file to JS Bundle, output path (single JS bundle file or dir)

-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

......

--help Show help

如果一切正常, 請在命令行中切換工作目錄到剛才存儲 tech_list.we 所用目錄并輸入如下命令:

weex tech_list.we

你系統默認瀏覽器的窗口將自動打開以顯示如下內容

(請使用 weex --version 命令檢查你的weex-toolkit版本是否大于 0.1.0）

語法概念

現在我們來了解下一些簡單的語法概念. 如 tech_list.we所示, Weex代碼由三部分構成: template (模板),style (樣式) 和 script (腳本) 。這三個概念之于Weex就如 html,css,javascript 之于Web.

模板部分賦予Weex以骨架, 由標簽以及標簽包圍的內容構成。Weex中的標簽分為開放標簽(eg: )和閉合標簽(eg: )兩種, 我們把每一對開放&閉合標簽稱為一組Weex標簽. 標簽中能添加 屬性 ，不同的 屬性 有不同的含義,例如 class屬性讓同樣的樣式可以作用于多組Weex標簽， onclick 屬性讓標簽能對用戶點擊事件作出回應。

樣式部分描述Weex標簽如何顯示。和你一樣,我們喜歡CSS, 所以Weex中的樣式盡量和CSS標準一致。Weex支持很多CSS中的特性: margin, padding, fixed...... 更好的是, flexbox布局模型在Weex中有著很好的支持。

腳本部分為Weex標簽添加數據與邏輯 ，在這里你能方便的訪問本地和遠程的數據并更新標簽。你還能定義方法并讓這些方法響應不同的事件. Weex腳本的組織方式基本遵循于CommonJS module規范。

關于Weex語法的更多信息，你能在 Syntax chapter 查看。

添加更多的列表項

單獨一個列表項稱不上”列表” , 所以讓我們來添加更多的列表項. 打開剛才的tech_list.we文件，更新其中的內容如下：

<template>

<div class="container">

<div class="cell">

<image class="thumb" src="http://t.cn/RGE3AJt"></image>

<text class="title">JavaScript</text>

</div>

<div class="cell">

<image class="thumb" src="http://t.cn/RGE3uo9"></image>

<text class="title">Java</text>

</div>

<div class="cell">

<image class="thumb" src="http://t.cn/RGE31hq"></image>

<text class="title">Objective C</text>

</div>

</div>

</template><style> .cell{ margin-top:10 ; margin-left:10 ; flex-direction: row; } .thumb { width: 200; height: 200; } .title { text-align: center ; flex: 1; color: grey; font-size: 50; }</style>

現在，讓我們來嘗試使用Weex Native渲染器來渲染這個文件。打開終端，切換到保存該文件的目錄，執行

weex tech_list.we --qr

終端中將會出現一個二維碼（不能放二維碼，請理解）。

這個二維碼需要配合 Weex Playground App工作。下載安裝后點擊App中的掃碼圖標，然后用你的手機攝像頭掃描終端中的二維碼。一個漂亮的列表將出現在你的手機中。

這里我需要強調，這個列表是完全由native view(不是Webkit)來進行渲染的，相比Webkit渲染的界面，你的App能獲得更快的頁面加載速度和更少的內存開銷。

現在你能嘗試變更一些 tech_list.we中的內容，在保存變更內容之后, Weex Playground 將會立即在界面上反映出這些變化， 這個特性常被稱為 Hot-Reload,希望能幫助你更方便的進行Weex開發。

添加內置組件

除了自己動手從最基礎的標簽開始編寫, Weex還提供很多內置組件。Slider(滑動器)在移動App和頁面中很常見，所以我們提供了一個內置的Slider組件讓你能在自己的界面里輕松的添加一個滑動器. 打開tech_list.we，把里面的內容變更如下：

<template>

<div style="flex-direction: column;">

<slider class="slider" interval="{{intervalValue}}" auto-play="{{isAutoPlay}}" >

<div class="slider-pages" repeat="{{itemList}}" onclick="goWeexSite" >

<image class="thumb" src="{{pictureUrl}}"></image>

<text class="title">{{title}}</text>

</div>

</slider>

<div class="container" onclick="goWeexSite" >

<div class="cell">

<image class="thumb" src="http://t.cn/RGE3AJt"></image>

<text class="title">JavaScript</text>

</div>

<div class="cell">

<image class="thumb" src="http://t.cn/RGE3uo9"></image>

<text class="title">Java</text>

</div>

<div class="cell">

<image class="thumb" src="http://t.cn/RGE31hq"></image>

<text class="title">Objective C</text>

</div>

</div>

</template><style> .cell { margin-top:10 ; margin-left:10 ; flex-direction: row; } .thumb { width: 200; height: 200; } .title { text-align: center ; flex: 1; color: grey; font-size: 50; } .slider { margin: 18; width: 714; height: 230; } .slider-pages { flex-direction: row; width: 714; height: 200; }</style><script>module.exports = { data: { intervalValue:"1000", isShowIndicators:"true", isAutoPlay:"true", itemList: [ {title: 'Java', pictureUrl: 'http://t.cn/RGE3uo9'}, {title: 'Objective C', pictureUrl: 'http://t.cn/RGE31hq'}, {title: 'JavaScript', pictureUrl: 'http://t.cn/RGE3AJt'} ] }, methods: { goWeexSite: function () { this.$openURL('http://alibaba.github.io/weex/') } }}</script>

在終端中同一目錄再次運行這個命令。

weex tech_list.we

一個漂亮的滑動器將會添加到我們之前編寫列表的頂部。

更多有關滑動器組件的信息請在http://alibaba.github.io/weex/doc/components/slider.html查看。

就像我們之前演示過的，這個界面也能用"Native View"的方式在Weex Playground App中被渲染。如果想讓你自己的App也獲得這樣的能力，請訪問http://alibaba.github.io/weex/doc/advanced/integrate-to-android.html ，學習如何把Weex集成進入你自己的App中。

BTW：歡迎來參加Weex WorkShop 挑戰賽，與頂尖移動開發者小伙伴華山論劍~~更能贏取你必定中意的神秘大獎！

npm install -g weex-toolkit

<template>
 <div class="container">
 <div class="cell">
 <image class="thumb" src="http://t.cn/RGE3AJt"></image>
 <text class="title">Hello Weex</text>
 </div>
 </div></template><style> .cell { margin-top: 10; margin-left: 10; flex-direction: row; }
 .thumb { width: 200; height: 200; }
 .title { text-align: center; flex: 1; color: grey; font-size: 50; }</style>

weex hello.we

編譯結束后，電腦上的默認瀏覽器會打開一個窗口展示運行結果，如圖：

同時在當前目錄下生成一個 weex_temp 文件夾，里面是 H5 顯示所需要的一些源文件。其中，與 hello.we 文件對應的有一個 hello.js，這種 與 .we 文件一一對應的 .js 的文件也是 Android 和 iOS 工程集成 Weex 時所要用到的文件，我們后續寫到 Android 集成時再講具體怎么用。

除了 PC 瀏覽器，當然還可以在手機端實現實時預覽。前提是需要手機下載安裝 Weex Playground App ，并與 PC 保持在同一個局域網內。退出上面的服務（ Mac 下使用 Ctrl + C 快捷鍵組合），運行命令：

weex hello.we --qr

終端中會顯示一個二維碼，打開手機上的 Playground 應用，點擊右上角的掃描按鈕，掃描這個二維碼，即可展示 hello.we 的運行結果，如圖：

此時在 hello.we 文件中的任何修改，保存之后都會立即反映在手機端的顯示上，無需重新編譯。

由于 weex 源代碼的文件格式為 .we 格式，默認在文本編輯器中不支持語法高亮，代碼看起來很不舒服。不過可以使用 vue.js 的語法高亮來支持 .we 文件的編輯，分別參考 for vim、for Sublime、for ATOM。這里額外介紹 Sublime 的另外一種處理方式。

第一步，制作 Weex 語法高亮腳本：打開 Sublime Text，依次點擊 Tools -> Developer -> New Syntax，新建一個語法文件，打開 gist 鏈接 Plain we.sublime-syntax，復制內容到剛才新建的語法文件中，并保存，文件名和擴展名為 Plain we.sublime-syntax 。

第二步，開啟 weex 語法高亮支持：依次點擊 View -> Syntax，選中 We Component 即可。支持 Weex 文件語法高亮的 Sublime Text 編輯器截圖如下，整個看上去清爽多了：

• Weex On GitHub
  
• Weex Doc 英文版 & 中文版
• Weex 交流社區
  

• Weex Team On GitHub