第一次接觸cordova，從環境搭建到打包第一個apk踩了蠻多坑的，寫篇教程給大家參考一下

最後成果

安裝前環境：

1、win10系統

2、java jdk 版本是 v1.8.0（java jdk是很早之前就安裝了的，關於java jdk的配置教程滿多的，這裡就不絮叨這個了）

3、我是前端，node.js是我必備軟體之一，我目前的版本是v8.11.1

安裝node

推薦點選這個

node安裝蠻簡單的，一路next就好

安裝完成後可以用 node -v檢視版本

Android SDK 環境變數配置

下載地址 http://www.androiddevtools.cn/，這個地方我只需要sdk不需要他的編輯器所以這個地方我們就只下載sdk

1、下載解壓至D:\Program Files\androidSDK

2、點選，出現下圖

3、原有不用取消繼續勾選

4、勾選完成後點選右下角的install--在彈框裡勾選最後一個--最後install

5、如果出現了這個

那麼你很幸運去第7步配置環境變數吧

如果你出現了一個Warning！的警告框提示你有程式佔用了這個資料夾，那麼你跟我一樣很倒黴，看第六步

6、刪掉之前那個資料夾，重新解壓安裝包到一個空資料夾，複製tools，命名為tools-copy

在tools-copy目錄執行 android.bat ，這樣就可以正常安裝完了

7、新建系統變數
名：ANDROID_HOME
值：c:\tools_r25.2.3-windows”

編輯環境變數Path，在彈框裡點選新建，你可以向我一樣輸入3條，也可以這樣

值：

;%ANDROID_HOME%\build-tools\27.0.3;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;

需要注意的是27.0.3是build-tools資料夾中的一個資料夾的名字

8、終端中輸入adb，出現下圖表示成功

安裝ant

下載連結：https://ant.apache.org/bindownload.cgi

1、下載第一個就好

2、下載完成之後解壓到你想安裝的目錄，比如我是D:\Program Files\ant

3、右擊我的電腦--屬性--高階系統設定--環境變數--點選新建使用者變數

名：ANT_HOME

值：D:\Program Files\ant

4、終端輸入ant -v出現以下畫面表示安裝成功

安裝gradle

下載連結http://services.gradle.org/distributions/

1、下載解壓至D:\Program Files\gradle-4.7

2、右擊我的電腦--屬性--高階系統設定--環境變數--在系統變數裡找到Path點選編輯

在編輯環境變數的彈框內點選新建

輸入D:\Program Files\gradle-4.7\bin 點選確定

3、終端輸入 gradle -v出現下圖安裝成功

安裝cordova

不容易，終於來到這一步了

1、全域性安裝

npm install -g cordova

2、cd到你想要建立專案的資料夾，cordova create是建立專案的命令，hello為本地資料夾名稱，com.example.hello為專案id，HelloWorld為最後app的名稱

$ cordova create hello com.example.hello HelloWorld

執行成功後，專案目錄變成了這樣

目錄結構說明

hooks：存放自定義cordova命令的指令碼檔案。
config.xml ：cordova的配置檔案 
www:工作目錄,所有的html，js之類的檔案預設載入到index.html，在cordova prepare時被copy到各個平臺的assert的www目錄中
plugins：已安裝的外掛
platforms：各平臺的工程目錄，cordova編譯工程時會將其覆蓋

3、給你的App新增目標平臺，現在我們新增android'平臺，並確保他們儲存在了config.xml中

$ cordova platform add android --save

出現這個表示你安裝新增成功

檢查你當前平臺設定狀況

cordova platform ls

如果你順利新增成功沒有報任何error，執行這個命令會是這樣的

那麼就去第5步打包吧

如果報了error那就肯定沒有成功installed platforms是空的

5、執行cordova build android進行打包，時間會有點長，

打包完成後可以在專案資料夾platforms\android\app\build\outputs\apk\debug內找到打包好的apk檔案

手機上安裝後就是這樣的

若對你有幫助或喜歡本文請點贊 o(￣▽￣)ｄ
如有不足、需要改善或者還能優化的地方歡迎指出，歡迎留言交流  (´▽`ʃ♡ƪ)