大家關注了昨天的 VueConf 大會了吧，如果沒有猜錯，昨天肯定也涉及到了weex的開發，難道你們就不好奇嗎？反正我是很好奇，所以我擼了一個教程，帶你們入坑，讓我在weex道路上不孤單的前行。
介紹
估計很多人第一次聽說weex，weex是阿里開發的，可以使用 vue2.0的語法開發一個接近原生的app,目前被被捐獻到了apache，簡單來說，你可以理解為weex 就是vue native 。
官方地址
github
- 一次編寫，多端執行（這個口號碉堡了，有木有）
Weex 提供強大的跨平臺能力，可以使用相同的 API 開發 Web，Android 和 iOS 應用。 同時，我們對介面了豐富的擴充套件能力。 這樣，當您需要擴充套件原生元件或模組時，這將非常方便。
- 支援 Vue 語法（很爽啊，vue語法搞起）
Weex 遵循 Web 標準，同時支援 vue.js 的語法。因此，您可以使用 vue.js 語法來開發應用程式。
- 誰在使用 Weex?（大公司都在用）
天貓，淘寶，阿里雲，蝦米，菜鳥裹裹，優酷等等
前期準備
網上教程大多都是用安卓工程師，ios工程師的視角來講weex，按理來說我這也不能算教程，只能說是一點點心得體會，這個教程面向前端工程師，基於window來講的，系統最好是win10,請自備科學上網，因為可能weex國內映象和國外映象有差
- 下載安裝node
推薦安裝教程www.runoob.com/nodejs/node…
下載完成後，命令列輸入如下命令(版本最好是最新穩定版)（npm版本最好是3以上）推薦老鳥們安裝nvm，window也是可以得，用了半年多，各個node版本切換和下載都十分方便
- 下載java
安裝教程（記得要配到環境變數中）
3.下載android studio（一定要下載帶sdk那個接近2G的版本）
安裝安卓studio（搞過react native的估計就懂了，老鳥可以跳過）
不過因為可能有大部分是前端開發者，我說的詳細一點
下載好之後，選擇要安裝的目錄，一直下一步，直到
這一步，我們去掉勾，然後按finish,接下來配置環境變數。
。把你安裝目錄下的sdk,skd/tools,skd/platform-tools放到環境目錄下，如下圖
接著呢，我們點選android studio的圖示，開啟之後也是一路預設點選next，當安裝好所有東西的時候，我們開啟sdk manager，下載一些依賴的庫，下載23.02（一定要）
4.開啟命令列輸入
npm install weex-toolkit -g
檢視是否安裝成功
安裝結束後你可以直接使用 weex 命令驗證是否安裝成功，它會顯示 weex 命令列工具各引數：
npm install webpack -g
檢視是否安裝成功
5.推薦安裝谷歌瀏覽器，這個就不用我說了吧
到此，環境搭建就完了，說難不難，說容易也不容易。太多的客觀因素，比如牆了，比如電腦系統的環境不同，可能少有不同等等，請耐心配置完環境。
操作
weex create HelloWeex
cd HelloWeex
npm install
weex platform add android (還可以新增ios)
weex run android複製程式碼詳解
上面的幾句命令對新手太不友好了，我來詳細解釋下吧
再來看看這張圖
常用的就兩種weex create 和init，我們先來看看weex create後期我們再用init
當我們新增了platform add android的時候呢，目錄就會多一個android的包
那我們要怎麼寫檔案呢?主入口檔案就是src檔案下的index.vue(跟vue很像吧)
釋出到安卓手機上(我們在虛擬機器上試試)，也可以真機除錯
weex run android
他會自動檢測你電腦是否有連線，有的話會在你手機上開啟weex的頁面，並且瀏覽器會自動開啟(其實就是開啟了serve)，顯示的也是weex頁面
我們用android studio來開啟剛剛platform裡面的那個android，第一次開啟會下載很多依賴，耐心等待吧
然後開啟虛擬機器。
稍等一會就可以看到軟體自動的在你虛擬機器上開啟了（如果沒反應，就先開啟虛擬機器，再輸入命令weex run android）,當然你電腦記憶體不夠的話，可以真機也可以，記得在手機開發者模式中開啟usb除錯。
當你出現如下頁面，那就成功了
好了，今天我們就不用android studio了，我們直接在網頁除錯，配置一下webpack怎麼讓他熱載入等等。
執行配置
現在一看到構建工具的東西，我都會潛意識的開啟readme.md檔案和package.json檔案，我們來看看package.json下面的script裡的指令碼
在 package.json 中，已經配置好了幾個常用的 npm script，分別是：
我們直接npm run dev 就是打包，修改檔案，會自動的編譯到dist/index.js,index.web/js 網頁是web.js 其他平臺依賴index.js （-w 就是watch監視）
你修改/src/index.vue檔案，然後儲存，就可以在命令列在不斷變化著，監視作用起效果了。
但是，你修改src/index.vue，就算重新整理刷爆瀏覽器，頁面並不會更新。因為他只是監聽程式碼，並且打包到dist目錄下，並不是監聽渲染到頁面上（如果你不打包，幾乎用不到npm run dev），如果你想頁面也渲染，就要輸入npm run build 或者webpack編譯打包，瀏覽器重新整理一下，頁面就會改變了，但是你每次改動程式碼，就要輸入webpack一次，瀏覽器又要重新整理，太麻煩了， 我們改一下package.json原始碼
，然後在瀏覽器地址裡面插入http://192.168.253.3:8080/webpack-dev-server/web/
這就實現了熱更新的功能了，幾乎跟vue一樣了，是吧。
這時候，尷尬的事情就出現了，說好的網頁開發，但是我們安卓虛擬機器顯示的東西跟網頁不一樣了，那不是沒有意義了嗎。
別急，還差最後一丟丟，我們就徹底搞定開發環境
把上面編譯後的index.js（編譯後指的就是輸入了npm run build）內容複製到下面的index.js，然後點選閃電的標誌或者快捷鍵ctrl+f10,虛擬機器就會重新重新整理，這樣就OK了。
最後一步了，那就是打包成apk，
android studio會自動生產一個apk檔案，你直接拖進手機或者虛擬機器裡面就能執行了。
好了,weex整個的流程差不多就是這樣子了，本地機器的環境搭建，到weex專案的搭建，不過還沒說完，我怕說下去，大家會混亂，所以我決定再開一小節，講講如何用vue2.0的模式來構建專案，大家莫慌。順便說一句，假如你在安裝過程中出現了問題，請先試試科學上網之後，再不行就留言吧，我會盡全力回覆的，如果有錯，請批評指出。
還有一個不情之請，請大家把踩過的坑，以及怎麼解決的，都寫在評論上吧，這樣後來者們，才能更好的學習weex,weex也才能更好的發展，幫助他人就是幫助自己。