生活不只眼前的苟且，還有詩和遠方的田野。
一、前言
4月21日，阿里巴巴在Qcon大會上宣佈跨平臺移動開發工具Weex開放內測邀請。
Weex能夠完美兼顧效能與動態性，讓移動開發者通過簡捷的前端語法寫出Native級別的效能體驗，並支援iOS、安卓、YunOS及Web等多端部署。
對於移動開發者來說，Weex主要解決了頻繁發版和多端研發兩大痛點，同時解決了前端語言效能差和顯示效果受限的問題。開發者只需要在自己的APP中嵌入Weex的SDK，就可以通過撰寫HTML/CSS/JavaScript來開發Native級別的Weex介面。Weex介面的生成碼其實就是一段很小的JS，可以像釋出網頁一樣輕鬆部署在服務端，然後在APP中請求執行。
與現有的開源跨平臺移動開放專案如Facebook的React Native和微軟的Cordova相比，Weex更加輕量，體積小巧。因為基於web conponent標準，使得開發更加簡潔標準，方便上手。Native元件和API都可以橫向擴充套件，方便根據業務靈活定製。Weex渲染層具備優異的性 能表現，能夠跨平臺實現一致的佈局效果和實現。對於前端開發來說，Weex能夠實現元件化開發、自動化資料繫結，並擁抱Web標準。
2016阿里雲大會剛過，本次阿里雲大會上，手淘團隊公開了手淘的技術框架，手淘由三大容器和五大解決方案作為技術支撐，其中三大容器分別是ATLAS、H5容器和WEEX。值得讓開發者興奮的訊息是，本次大會阿里神祕的weex全部開源了。
好了，關於weex的各種新聞報道就介紹到此了（複製貼上），開發者最關心的還是怎樣把weex整合到自己的專案裡面。從認識weex到搭建weex環境搭建，再到weex專案整合到自己的專案，也踩過一些坑，在這裡把weex環境搭建和整合的教程分享給大家，希望大家能快速上手weex專案，少走些彎路，從此專案裡H5介面就不用愁了。本篇文章主要講解Mac系統配置weex環境，windows系統環境配置大同小異。
二、weex環境搭建
1、Node.js安裝
weex環境基於Node.js，所以第一件要做的事情就是安裝Node.js。N
接下來的事情就是“下一步”直至“關閉”就OK了。
上面有這樣一句話“Make sure that /usr/local/bin is in your $PATH”，意思是叫你檢查環境變數是否配置了Node.js的環境變數。你可以這樣去檢查：
# 使用vim開啟.bash_profile檔案，加入java環境變數，終端輸入下面命令，回車，進入bash_profile編輯介面$ vim .bash_profile鍵盤“I”或者“Insert”進入編輯vim編輯模式，新增下面這句配置export PATH=${PATH}:/usr/local/bin
鍵盤“esc”，然後“:”，然後“wq”，退出並儲存已編輯檔案，環境變數就配置好了。好了，Node.js環境至此就配置好了，可以在終端輸入 node -v 命令檢視node.js版本。接下來配置weex工具外掛，也就是weex環境。
2、weex環境配置
繼續在終端輸入按次序輸入如下命令1）sudo chown -R $USER /usr/local //加上管理員許可權3）npm install -g weex-toolkit //安裝weex工具外掛
注意，第3)點基於第1)點，weex-toolkit的安裝是需要終端在管理員許可權下安裝，不然會報錯，安裝失敗；第2)點時指定weex外掛的映象地址，配置下會安裝速度會快點，不配置問題也不大的；第3)點需要等待一段時間，安裝成功後，輸入終端輸入 weex 命令，如果有info資訊大於，說明安裝成功。
好了，weex工具外掛至此也安裝好了，接下來我們就開始編寫.we檔案，通過該工具測試並編譯成對應的.js檔案。
3、編寫.we檔案，測試效果
我們可以在桌面新建一個命名為weex的檔案，然後終端cd到該目錄，我們在該目錄下新建一個hello.we檔案
終端輸入下面命令進入編輯模式：
vim hello.we
把這段即將列印“Hello World.”的程式碼寫入編輯器：
<template> <div> <text style="font-size:100px;">Hello World.</text> </div> </template>
退出並儲存。這樣，hello.we檔案就新建成功了。
接下來，我們再在終端輸入如下命令：
weex hello.we
即可執行“Hello World.”到瀏覽器頁面了。
我們還可以在終端輸入下面命令，會在終端生成一個二維碼，用官方提供的weex demo的apk中的“掃一掃”，即可在手機上瀏覽頁面效果，官方提供的demo apk下載地址：https://alibaba.github.io/weex/download.html
weex hello.we --qr
注意，紅色框中的英文，意思是手機端的網路和電腦端的網路要在同一區域網（即連線同一個wifi），不然手機端不能預覽效果。
好了，至此，在weex工具的幫助下，.we檔案也能跑起來了，並能時刻測試預覽介面效果。怎樣把weex專案整合到自己的專案中呢？下一篇博文將會給大家詳細介紹喔！4、花旦，編寫更多的.we檔案，預覽效果weex中文文件地址(快速上手裡面有個教程教大家如何用weex寫列表)：weex github地址：