混合app開發(fā)顧名思義一個(gè)app既有原生app語法（包括ios和android）又有前端html+javascript+css語法。這種混合開發(fā)框架甚多，從最早的cordova一統(tǒng)天下的局面到現(xiàn)在最火的React Native，再到興起的阿里Weex框架。說實(shí)話一開始有些概念沒理清看Weex官網(wǎng)的教程配置有些懵，東一塊西一塊后來坑碰的多了，才發(fā)現(xiàn)官網(wǎng)的文檔確實(shí)亂，有些重要的地方?jīng)]有展開講，希望后面會(huì)更新上。我覺得對(duì)于第一次接觸Weex的朋友來說可以先用一種方式把工程構(gòu)建起來，再配合官網(wǎng)資料和其他社區(qū)來擴(kuò)展知識(shí)。

Weex官網(wǎng)介紹的兩種方式

1、集成Weex到已有的android應(yīng)用。

對(duì)應(yīng)的場(chǎng)景就是你現(xiàn)在有一個(gè)開發(fā)中的android app了，想用上Weex。這個(gè)可以直接參照官網(wǎng)的教程來，沒啥問題。

2、新建Weex項(xiàng)目，由Weex項(xiàng)目構(gòu)建新的android應(yīng)用。

對(duì)應(yīng)的場(chǎng)景就是你現(xiàn)在啥都沒有，要從頭開始做一個(gè)Hybrid混合app應(yīng)用。可以按照下面這個(gè)步驟來搭建工程，直至運(yùn)行起來。

• 1、肯定是安裝NPM和Node.js了，具體這個(gè)可以參考網(wǎng)上安裝教程，只要最后用node -v命令能正確查看到node版本就說明node環(huán)境安裝好了可以進(jìn)行下一步。
  image.png
• 2、全局安裝week-toolkits腳手架。隨便打開一個(gè)CMD命令行窗口輸入命令npm install weex-toolkit -g來全局安裝week-toolkits腳手架
• 3、用week-toolkits腳手架創(chuàng)建Weex工程。安裝完week-toolkits腳手架之后命令行就能用weex相關(guān)命令了，首先找個(gè)地方創(chuàng)建一個(gè)空文件夾（比如我的是D:\WEEXProject\weexDemo），在此文件夾內(nèi)打開CMD命令行窗口輸入weex create weexdemo，創(chuàng)建過程中會(huì)有一系列選項(xiàng)（比如給工程取個(gè)名字、是否要引入vue-router、是否要ESLint這些，看情況選擇），創(chuàng)建完后可以看到：
  image.png
  
  接下去執(zhí)行一下npm install安裝一下依賴，生成node_modules庫
• 4、運(yùn)行起來。本來到此就能把Weex工程跑起來了，但是還有注意點(diǎn)，npm的版本要升到5以上，所以你先用命令npm -v檢查一下npm的版本（新安裝node的朋友基本是最新的，一直就在從事前端開發(fā)的朋友最好還是檢查一下）然后通過npm i npm@latest -g命令把npm更新到最新版。都做完了就可以USB連上安卓手機(jī)嘗試用weex run android命令把這個(gè)Weex工程跑在手機(jī)上了。如果期間遇到報(bào)錯(cuò)Command failed: call gradlew.bat assembleDebug時(shí)先檢查自己的jdk版本，jdk至少要升到1.8，安裝完jdk1.8后調(diào)整環(huán)境變量JAVA_HOME，重啟后再跑weex run android命令就ok了。成功后是這樣的：
  weex run android成功.png
  這里我建議暫時(shí)不看官網(wǎng)的各種調(diào)試手段，先把這個(gè)run android跑通吧。
• 5、用上android原生API。到現(xiàn)在為止看到的都是前端的東西，混合開發(fā)怎么能少了原生的代碼呢。這時(shí)就需要?jiǎng)?chuàng)建android工程了，Weex提供了創(chuàng)建的方式：用命令weex platform add android添加android工程，成功后，你就能在platforms文件夾下看到android工程了，
  image.png
  
  此時(shí)，你要用android studio來打開這個(gè)android工程（默認(rèn)生成的是as工程，沒有eclipse的）。看到代碼后你會(huì)發(fā)現(xiàn)官網(wǎng)集成Weex到已有應(yīng)用教程中需要手動(dòng)添加依賴的工作，這里都已經(jīng)幫你做好了，對(duì)于我們第一次搭建的小伙伴來說，先熟悉一下后面再慢慢學(xué)習(xí)原理。對(duì)于開發(fā)來說Weex前端Vue部分和原生android是一種Module機(jī)制，如官網(wǎng)就封裝了一些Module給前端調(diào)用：
  image.png
  
  一般來說官網(wǎng)提供的都是基礎(chǔ)的Module，我們會(huì)根據(jù)自己的需求去創(chuàng)建自己的Module，這里打開android代碼先注意到有兩個(gè)文件：WXEventModule和WXApplication
  image.png
  
  WXEventModule類繼承自WXModule，你可以在這個(gè)類里定義module，供Vue前端調(diào)用。如我這里寫一個(gè)printLog方法去實(shí)現(xiàn)一個(gè)調(diào)用安卓Toast的功能：
  
  image.png
  
  然后打開WXApplication看一下，這里已經(jīng)為我們默認(rèn)去注冊(cè)了Module，名稱為event：
  image.png
  
  最后在Vue頁面require對(duì)應(yīng)Module來使用即可，比如我這里直接在index.vue里寫上：
  
  image.png
  
  代碼保存后執(zhí)行weex run android在手機(jī)上跑效果如下：
  
  QQ圖片20180802135436.png
  
  這樣就表示我們一個(gè)Weex混合APP就調(diào)通了。官網(wǎng)介紹的一些調(diào)試手段，打包發(fā)布的流程后面再慢慢學(xué)習(xí)折騰吧。