文章說明：

這篇文章每週更新3節，大約18-20節，所有更新都會在此文章中進行，不新起文章了，所以有追看的小夥伴請收藏或點心。

文章不僅有文字和圖片，也有視訊，由於不會在掘金中插入視訊，所以觀看視訊請到我個人部落格中觀看。(視訊觀看點選這裡)

第01節：課程介紹

WEEX是什麼？

WEEX的出現讓我們可以使用Vue來進行移動端原生應用開發，是前端小夥伴們必備技能。

與 Web App、HTML5 App 或 hybrid App 不同，您可以使用 Weex 構建一個真正的原生應用。更貼心的是你的程式碼只需使用 HTML、CSS、JavaScript 可以構建原生應用，上手非常簡單。但實際上，應用的底層是 Objective-C 或 Java， 同時，Weex 提供很多 native 元件或模組供開發人員使用。也就是說，你會前端知識，想作真正的app，那你學習WEEX就對了。

*******點選這裡觀看第一節視訊 *********

那些公司在用

阿里系的公司基本都在用，包括天貓、淘寶、釘釘（具體可以看下邊的圖片）。現在尤大神擔當的WEEX的顧問。所以說我們有必要系統的學習一下WEEX。雖然WEEX已經捐贈給了Apache公司，但是阿里的人員一直做著貢獻。有人說React Native要比WEEX的元件多百倍，我不否認，畢竟WEEX才剛剛開始，就像VUE剛剛開始一樣，很多人鄙視瞧不起，但是現在也被接受，並開始大規模使用一樣。

需要的前置知識：

1. Vue的基礎知識，這也算一個最高的門檻了，但是幸運的是在這裡你都可以免費學到。
2. 會安裝Node和使用NPM進行包管理。
3. 會基本的CSS和JavaScript的知識。

學前先知：

• 這門課程的坑是比較多，難度要比其他課程要大，所以做好思想準備。
• 如果你有Vue的基礎，上手會簡單一些。
• 這不再是網頁，而是原生應用，所以有很多和網頁不一樣的地方，你需要適應。

課程難點：

• 國內的網路會給你帶來很多麻煩，所以你需要一些科學上網的本領。
• 環境的搭建，環境搭建你可以能需要8小時-2天時間，不要放棄，多嘗試。
• 適應原生開發的一些規範，如果你已經是個前端開發高手，你需要多一些適應。

PS：看WEEX的文件坑會比較多，所以建議你學完視訊再去看文件進行填坑操作。如果你有坑過不去了，也可以參與到我們的眾籌活動中來，技術胖會在群裡進行解答。

課程分三個章節：

大約18-20節課，每週更新三節。

1. 開發環境的搭建
2. 元件和模組的使用
3. 學習中問題答疑處理。

第02節：開發環境安裝(1)

開發環境的搭建是這門課程的重點和難點，因為國內網路環境的原因，你可能會安裝好幾遍才能安裝成功，也會由於錯誤，你可能要重新安裝系統，但是請不要放棄，因為只要踏過這道坎我們講師一馬平川，順風順水。我在完全熟悉的安裝下也安裝了8個小時左右，所以你最好是一邊工作以邊安裝，或者拿出一個週六，看著電影安裝著，這樣會消除一些你的不安情緒。

*******點選這裡觀看第二節視訊 *********

首先是系統建議，如果你用windows系統，我建議你升級到win10，因為在win7下安裝由於許可權的原因，你有可能會安裝失敗。經過幾次嘗試，發現win10安裝還是比較順利的。

安裝node：

在系統安裝好後，你需要先安裝Node。這個過程和安裝QQ的過程一樣，所以沒什麼講的。

下載地址：nodejs.org/en/download…

請使用LTS版本，因為Node維護著兩條釋出流程：奇數版本每年10月份釋出，偶數版本第二年4月份釋出。當一個奇數版本釋出後，最近的一個偶數版本會立即進入LTS維護計劃，一直持續18個月，再之後會有12個月的延長維護期。當一個偶數版本釋出時，奇數版本只有2個月的維護期，以後只能升級。

當然也不建議使用CURRENT版本，也就是我們說的最新版，雖然官方說是可以使用的，但是我個人還是比較保守的，我怕一些未發現的BUG，影響我們的安裝，所以我們使用LTS，長期維護版本。

安裝完成後檢視版本：

node安裝完成後我們最好在命令列工具中檢測一下版本。

node檢測

npm檢測

安裝Java的環境

因為我們最終開發的是android原生程式，所以需要安裝java的環境。因為國內網路環境的問題，這個安裝可能會很慢。

下載地址：www.java.com/zh_CN/

這個現在的檔案很小，這並不是完整的離線安裝包，它的作用是檢測你係統並給你提供正確下載包的一個小軟體。所以它需要聯網繼續下載安裝，如果你的網路不好，你會遇到你學WEEX的第一坑，這個坑需要科學上網，否則你會等到天荒地老。請大家有點耐心，當顯示下圖時說明你邁過了第一個坑。

如果你真的在這個坑無法跳出，你可以下載離線檔案，雖然也會很慢，但是會有個進度，你就會比較安心。（具體方法可以看視訊教程….）

git的安裝

windows帶的命令列工具不是很友好，而且我們在學習WEEX時會用到Git的命令，所以這裡需要安裝一下Git。這個對於已經工作的小夥伴一定再熟悉不過了，每天都要進行使用。

Git的下載地址：git-scm.com

這個大概有37M大小，下載還算順利，然後一路下一步，下一步就可以安裝成功。桌面出現Git Bash圖示，說明安裝成功。

安裝weex-toolkit

安裝weex-toolkit需要使用npm進行安裝。

坑填：在安裝weex-toolkit的時候，儘量不要使用cnpm，因為我有過兩次使用cnpm安裝失敗的經歷，還有一次再次用npm安裝也不行，最後沒辦法重新作系統。需要提醒的是這個包的安裝也是比較耗時的。安裝完成後會報幾個WARN，這先不用管。安裝完成後，你可以使用-v的命令檢測是否安裝成功，彈出版本號，說明安裝成功了。

安裝全域性webpack

使用npm安裝webpack,如果你安裝很慢，這個是可以使用cnpm來進行安裝的。

安裝好後使用-v進行檢視版本。

安裝android-studio：

其實到上一步驟，已經可以使用了，但是沒有原生開發的感覺。那為了這個Feel我們需要再安裝android-studio。

在安裝過程中，你需要記錄一下SDK的安裝位置，安裝好後，我們要配置環境變數。

填坑：安裝時你最好關閉防毒軟體或者360衛士這樣的軟體，因為他會組織android-studio一些關鍵位置的寫入，導致安裝後出現未知錯誤。

配置環境變數：

開啟環境變數路徑：控制皮膚->系統和安全->系統->高階系統設定->環境變數。

新建：ANDROID_HOME 並把我們剛才賦值的sdk路徑作為值插入。

新增platform-tools和tools到path下（這個看視訊吧，每個人的路徑不一樣，結果也不一樣）。

AndroidStudio配置：

在AndroidStudio的歡迎介面，你需要點選右下方的Configure進行老版本的SDK tool配置，

步驟：Configure->SDKManager->SDK Tools->勾選show Package Details ->勾選23.0.2

然後進入安裝。

總結：這節課雖然不難，但是比較耗時。大家一定要熬過這個過程，剩下就沒這麼耗時了。

第03節：開發環境安裝(2)

通過上節課艱難的安裝，憑著自己的耐心和毅力已經順利安裝完了。那我們這節課繼續進行開發環境的搭建，但是這節課不會像上節課坑那麼多。

*******點選這裡觀看第三節視訊 *********

建立weex專案目錄

上節課我們安裝了weex-toolkit，這個安裝成功了，我們就可以在命令列使用weex命令了，我們先來看一下版本的查詢。

weex -v複製程式碼

有了這個就可以生成我們的專案目錄了，類似於vue-cli。建立命令如下：

weex create helloWeex複製程式碼

輸入完這條命令時，如果你沒有安裝weexpack，他會提醒你進行安裝，這個weexpack也可以自己單獨安裝。

npm install weexpack -g複製程式碼

如果你沒有安裝weexpack這個過程會慢一點，請耐心等待。等出現Creating a new weex project.說明專案構建完成了，我們可以到專案目錄中去看一下。

你會發現已經給我建立了專案所需要的基本結構和檔案，這時候我們就可以cd到專案目錄下，然後使用npm install安裝依賴包了。

npm install複製程式碼

如果你感覺慢的話，你也可以使用cnpm install ，但是要說的是cnpm 有時候會安裝錯誤，這也算一個小坑吧。如果你用npm進行安裝時間會很長，並且在安裝完成後會有一些WARN警告，你可以暫時忽略這些警告。

新增Android應用支援

我們建立好了專案的基本目錄，這時候我們還要新增平臺的支援，這裡我們新增Android的支援。

weex platform add android複製程式碼

如果你要支援IOS平臺的話，你還要新增IOS應用，但是抱歉的是我沒有蘋果電腦，所以這裡就不演示蘋果的新增了。這個安裝過程並不算長，安裝好後可以去專案根目錄的platforms下看到android資料夾，說明應用支援新增成功。

釋出成Android應用

想在寫完一段程式碼時進行預覽效果，這時候就要使用run命令了。

weex run android複製程式碼

這裡是有一個坑，在命令執行完，它會報一個錯誤，錯誤是找不到安裝裝置。No android devices found.如果你自學這個坑會夠你添一會的了。那這裡我們安裝的android-studio就排上用途了。

在Android Studio裡執行weex

這裡是坑的重災區，希望大家專心邁坑。在上節課我們已經安裝好了Android Studio，我們點選圖示重新啟動。這時候出現上節課的介面，選擇第二項。

然後選擇你用weex建立的專案下的platforms/android目錄，開啟專案。這時候坑就來了，會報好多錯誤，但是你不要驚慌，雙擊安裝就好。

這個過程時間長短會根據你網路狀況和機器配置有關，如果網路不好，可能要安裝1-2個小時，所以耐心等待。等待loading條的消失，然後你就可以配置AVD了。（此過程最好收看視訊，文字不太好表達。）

AVD虛擬機器的安裝

等待錯誤和loading條消失以後，就可以配置虛擬機器了，選擇選單欄裡的Tools->Android->AVD Manager 進行配置。

到達這個頁面，然後點選Create Virtual Device 按鈕建立視訊。這時候要根據自己的電腦配置，選擇螢幕的大小，這個虛擬機器很吃記憶體，所以儘量選擇小螢幕解析度的。然後點選Next，之後進入虛擬機器的安裝過程，這個也是比較慢的，只要設計到google產品的都不會快。

安裝好後點選三角按鈕開始執行虛擬機器，然後稍等一會，不用作任何操作就會出現weex程式的預設介面。看到下面的介面恭喜你，這節課你已經大功告成了。