混合app開發顧名思義一個app既有原生app文法(包括ios和android)又有前端html+javascript+css文法。這種混合開發架構甚多，從最早的cordova一統天下的局面到現在最火的React Native，再到興起的阿裡Weex架構。說實話一開始有些概念沒理清看Weex官網的教程配置有些懵，東一塊西一塊後來坑碰的多了，才發現官網的文檔确實亂，有些重要的地方沒有展開講，希望後面會更新上。我覺得對于第一次接觸Weex的朋友來說可以先用一種方式把工程建構起來，再配合官網資料和其他社群來擴充知識。
Weex官網介紹的兩種方式
1、內建Weex到已有的android應用。
對應的場景就是你現在有一個開發中的android app了，想用上Weex。這個可以直接參照官網的教程來，沒啥問題。
2、建立Weex項目，由Weex項目建構新的android應用。
對應的場景就是你現在啥都沒有，要從頭開始做一個Hybrid混合app應用。可以按照下面這個步驟來搭建工程，直至運作起來。
1、肯定是安裝NPM和Node.js了，具體這個可以參考網上安裝教程，隻要最後用node -v指令能正确檢視到node版本就說明node環境安裝好了可以進行下一步。
image.png
2、全局安裝week-toolkits腳手架。随便打開一個CMD指令行視窗輸入指令npm install weex-toolkit -g來全局安裝week-toolkits腳手架
3、用week-toolkits腳手架建立Weex工程。安裝完week-toolkits腳手架之後指令行就能用weex相關指令了，首先找個地方建立一個空檔案夾(比如我的是D:\WEEXProject\weexDemo)，在此檔案夾内打開CMD指令行視窗輸入weex create weexdemo，建立過程中會有一系列選項(比如給工程取個名字、是否要引入vue-router、是否要ESLint這些，看情況選擇)，建立完後可以看到：
image.png
接下去執行一下npm install安裝一下依賴，生成node_modules庫
4、運作起來。本來到此就能把Weex工程跑起來了，但是還有注意點，npm的版本要升到5以上，是以你先用指令npm -v檢查一下npm的版本(新安裝node的朋友基本是最新的，一直就在從事前端開發的朋友最好還是檢查一下)然後通過npm i [email protected] -g指令把npm更新到最新版。都做完了就可以USB連上安卓手機嘗試用weex run android指令把這個Weex工程跑在手機上了。如果期間遇到報錯Command failed: call gradlew.bat assembleDebug時先檢查自己的jdk版本，jdk至少要升到1.8，安裝完jdk1.8後調整環境變量JAVA_HOME，重新開機後再跑weex run android指令就ok了。成功後是這樣的：
weex run android成功.png這裡我建議暫時不看官網的各種調試手段，先把這個run android跑通吧。
5、用上android原生API。到現在為止看到的都是前端的東西，混合開發怎麼能少了原生的代碼呢。這時就需要建立android工程了，Weex提供了建立的方式：用指令weex platform add android添加android工程，成功後，你就能在platforms檔案夾下看到android工程了，
image.png
此時，你要用android studio來打開這個android工程(預設生成的是as工程，沒有eclipse的)。看到代碼後你會發現官網內建Weex到已有應用教程中需要手動添加依賴的工作，這裡都已經幫你做好了，對于我們第一次搭建的小夥伴來說，先熟悉一下後面再慢慢學習原理。對于開發來說Weex前端Vue部分和原生android是一種Module機制，如官網就封裝了一些Module給前端調用：
image.png
一般來說官網提供的都是基礎的Module，我們會根據自己的需求去建立自己的Module，這裡打開android代碼先注意到有兩個檔案：WXEventModule和WXApplication
image.png
WXEventModule類繼承自WXModule，你可以在這個類裡定義module，供Vue前端調用。如我這裡寫一個printLog方法去實作一個調用安卓Toast的功能：
image.png
然後打開WXApplication看一下，這裡已經為我們預設去注冊了Module，名稱為event：
image.png
最後在Vue頁面require對應Module來使用即可，比如我這裡直接在index.vue裡寫上：
image.png
代碼儲存後執行weex run android在手機上跑效果如下：
QQ圖檔20180802135436.png
這樣就表示我們一個Weex混合APP就調通了。官網介紹的一些調試手段，打包釋出的流程後面再慢慢學習折騰吧。