我們将使用weex編寫一個簡單的清單 , 類似的清單經常能在電商類移動應用中見到。
開始
我們先編寫一個清單項。
請建立一個名為 <code>tech_list.we</code> 的檔案( <code>.we</code> 是weex推薦的字尾名 ) ，請複制粘貼以上代碼于其中。
在安裝結束後，你能通過在指令行視窗執行 <code>weex</code> 指令來檢查工具是否安裝正确. 僅僅輸入<code>weex</code>并敲擊回車後，你應該看到如下内容顯示：
如果一切正常, 請在指令行中切換工作目錄到剛才存儲 <code>tech_list.we</code> 所用目錄并輸入如下指令：
你系統預設浏覽器的視窗将自動打開以顯示如下内容：
現在我們來了解下一些簡單的文法概念。 如 <code>tech_list.we</code>所示, weex代碼由三部分構成: template (模闆), style (樣式) 和 script (腳本) 。這三個概念之于weex就如 html,css,javascript 之于web。
模闆部分賦予weex以骨架, 由标簽以及标簽包圍的内容構成。weex中的标簽分為開放标簽(eg: )和閉合标簽(eg: )兩種, 我們把每一對開放&閉合标簽稱為一組weex标簽. 标簽中能添加 屬性 ，不同的 屬性 有不同的含義,例如 <code>class屬性</code>讓同樣的樣式可以作用于多組weex标簽， <code>onclick</code> 屬性讓标簽能對使用者點選事件作出回應。
樣式部分描述weex标簽如何顯示。和你一樣,我們喜歡css, 是以weex中的樣式盡量和css标準一緻。weex支援很多css中的特性： margin, padding, fixed...... 更好的是, flexbox布局模型在weex中有着很好的支援。
腳本部分為weex标簽添加資料與邏輯 ，在這裡你能友善的通路本地和遠端的資料并更新标簽。你還能定義方法并讓這些方法響應不同的事件. weex腳本的組織方式基本遵循于commonjs module規範。
單獨一個清單項稱不上”清單” , 是以讓我們來添加更多的清單項. 打開剛才的<code>tech_list.we</code>檔案，更新其中的内容如下：
現在，讓我們來嘗試使用weex native渲染器來渲染這個檔案。打開終端，切換到儲存該檔案的目錄，執行
終端中将會出現一個二維碼，類似如下這樣：
這裡我需要強調，這個清單是完全由native view(不是webkit)來進行渲染的，相比webkit渲染的界面，你的app能獲得更快的頁面加載速度和更少的記憶體開銷。
現在你能嘗試變更一些 <code>tech_list.we</code>中的内容，在儲存變更内容之後, weex playground 将會立即在界面上反映出這些變化， 這個特性常被稱為 hot-reload,希望能幫助你更友善的進行weex開發。
除了自己動手從最基礎的标簽開始編寫, weex還提供很多内置元件。slider(滑動器)在移動app和頁面中很常見，是以我們提供了一個内置的slider元件讓你能在自己的界面裡輕松的添加一個滑動器。打開 <code>tech_list.we</code>，把裡面的内容變更如下：
在終端中同一目錄再次運作這個指令：
一個漂亮的滑動器将會添加到我們之前編寫清單的頂部。