這是我第一次寫關(guān)于技術(shù)的文章检号，一方面是怕自己時間久了忘記，另一方面也是避免像我一樣的初學(xué)小白踩坑出不來蛙酪。文章內(nèi)可能引用了網(wǎng)上某些大神的經(jīng)驗以及描述齐苛，感謝他們的分享，相同之處還望見諒桂塞。
廢話不多說凹蜂，直接上干貨，我的電腦是win10系統(tǒng)阁危，所以就按照我的系統(tǒng)來講解了玛痊！
一，開發(fā)前需要軟件的準(zhǔn)備 （文章所提到的軟件狂打，文章最底部有提供）
????1擂煞，nodejs環(huán)境安裝（這個是先決條件，我的項目安裝的是 node-v10.14.1-x64）
????2趴乡，jdk安裝 (java的開發(fā)基礎(chǔ)類庫 jdk-8u71-windows-x64)
????3对省，SDK安裝(安卓開發(fā)集成包，集成了安卓的開發(fā)工具晾捏，插件蒿涎，API等)
????4，gradle( Java的Weboack 惦辛，支撐app的編譯同仆，打包的流程，我項目安裝的是 Gradle 4.1)?
二裙品，編譯時需要的工具
????1，GitBush（我自己挺喜歡的一個工具俗或，代替win系統(tǒng)cmd很好的軟件）我提供了Git安裝包市怎，可直接安裝鼠標(biāo)右鍵使用
? ? 2，Window系統(tǒng)自帶的cmd（建議管理員運(yùn)行辛慰，因為有些命令需要管理員權(quán)限才能正常運(yùn)行）
? ? 3区匠，VSCode（微軟推出的一款很不錯的IDE，個人感覺和Sublime很像，界面很友好驰弄，需要什么插件直接搜索下載安裝就行麻汰。
? ? ? ? ? 這里主要是用到了它自帶的“終端”功能，ctrl + shift + y 的組合鍵打開戚篙，和Win系統(tǒng)的cmd類似五鲫，建議使用這種在IDE環(huán)境
? ? ? ? ? 內(nèi)操作命令方式來玩）
三，所需要環(huán)境的安裝配置
? ? 1岔擂，安裝nodejs 位喂，順帶連npm都安裝了，官網(wǎng)下載后直接Next安裝就行乱灵，實在不會的請看?http://www.reibang.com/p/03a76b2e7e00
????2塑崖，?jdk安裝，根據(jù)自己電腦的系統(tǒng)選擇x86和行x64的版本痛倚，按照提示安裝规婆，目錄最好為 C:\Program Files\Java（x64系統(tǒng)）
? ? ? ? ? ?或者?C:\Program Files（x86）\Java?（x86系統(tǒng)）完成后cmd輸入?java -version 驗證是否安裝成功
? ? ? ? ?只要出來 java version 等信息，表示安裝沒有問題蝉稳，可以進(jìn)行下一步了
? ? 3抒蚜，sdk (需要配置環(huán)境變量)
? ? ? ? ? 3.1 根據(jù)我提供的下載連接下載sdk后，解壓sdk 放在 C:\Program Files\Java 目錄下
? ? ? ? ? 3.2 配置環(huán)境變量颠区，我的電腦——右鍵屬性——高級系統(tǒng)設(shè)置——環(huán)境變量
? ??????????????在下面的環(huán)境變量中削锰，新建，鍵值對如下：name: ANDROID_HOME? ? ? key: C:\Program Files\SDK\androidsdk
? ? ? ? ? ? ? ? 如圖所示：
? ? ? ? ? ? ? ? ?然后在path中毕莱，全局聲明一下器贩，將 ;%ANDROID_HOME%\tools 綴在最后面，前面有【;】分隔符朋截。
? ? ? ? ? ? ? ? ?(注：win 10 系統(tǒng)不需要分號蛹稍，SDK，JDK也是一樣)部服。添加android-sdk下的tools與platform-tools到path路徑下
? ? ? ? ? ? ? ? ?見下圖
? ? ? ? ? ? ? ? ?然后運(yùn)行CMD唆姐，輸入android 和 adb命令 ，如果出現(xiàn)一大堆指令廓八，說明你的SDK安裝無誤奉芦，并且環(huán)境變量配置OK。
? ? ? ? ? ? ? ? ?見下圖：
4剧蹂，安裝gradle
? ? ? 安裝gradle到C:\Program Files 下然后添加系統(tǒng)變量声功，見下圖
完成后，添加路徑到path變量中宠叼，見下圖
添加完成后先巴，cmd輸入 gradle -v來驗證是否成功
5，安裝python
? ? 安裝python2.7到C盤目錄下，同時設(shè)置path路徑伸蚯，見下圖
? ? 安裝完成后cmd輸入python來驗證是否成功
6摩渺，打開android-sdk下的SDK Manager （打開后直接進(jìn)入界面，網(wǎng)上有說要在tools選項卡中選擇options剂邮，然后配置國內(nèi)鏡像摇幻，但是我配置后，發(fā)現(xiàn)在packages選項卡中點(diǎn)擊reload重載時抗斤，不能展示sdk列表囚企，所以我沒有配置國內(nèi)鏡像，直接就出來sdk列表了瑞眼。有的小伙伴要是默認(rèn)打開沒有加載sdk列表龙宏，那就配置下國內(nèi)鏡像吧，tools選項卡中選擇options伤疙，server處填寫mrrors.neusoft.edu.cn银酗，port處填寫 80，勾選Other處的Force https:// xxxxxxxxx徒像，然后回到packages選項卡中點(diǎn)擊reload重載黍特，就會出現(xiàn)sdk列表）
先勾選如下圖的三個Tools，一個SDK platform
分別是 Android SDK Tools,Android SDK platform-tools,Android SDK Build-tools锯蛀，SDK platform 見下圖
注： 這里有個大坑灭衷，我爬了一天才出來，咱們先扯扯這個坑旁涤，這里SDK platform一定要結(jié)合項目平臺選擇正確翔曲，否則會出現(xiàn)命令打包后，ionic serve 瀏覽器可以訪問接口數(shù)據(jù)劈愚，debug包安裝真機(jī)后瞳遍，不能訪問數(shù)據(jù)的坑。不能訪問數(shù)據(jù)的具體呈現(xiàn)為菌羽，所有接口返回 status：0掠械，url： Null，你說坑不坑注祖？ 我查了很多資料猾蒂，有的說是平臺問題，有的說是cordova插件白名單的問題是晨，還有說別的問題婚夫，但是大致上以這倆原因為主，那我就試試唄（其實我認(rèn)為還是平臺沒匹配好造成的）我先查看了下cordova的插件有沒有白名單署鸡，具體查詢命令為：cmd輸入 cordova?plugin?ls 結(jié)果還真有?cordova-plugin-whitelist 于是我卸載掉再安裝，打包裝機(jī)測試，哎靴庆，還是不能訪問數(shù)據(jù)时捌。這條路走不通，我又開始折騰SDK Manager 安裝SDK炉抒，裝來裝去還是不對（其實我對這些也不太明白奢讨，瞎貓抓耗子唄，能有啥辦法）焰薄，最后拿诸，我想起來，可能是我之前安裝的cordova-android版本較現(xiàn)在安裝的舊塞茅，現(xiàn)在安裝的是@9.0.0亩码，之前是@6.4.0，于是我趕緊查看版本信息野瘦，命令： cordova platforms list 果然是9.0.0描沟，趕緊執(zhí)行命令 cordova platform remove android 移除平臺，再?cordova?platform?add android@6.4.0 安裝6.4.0版本的鞭光，最后debug打包吏廉，安裝到真機(jī)后訪問數(shù)據(jù)還是失敗，仔細(xì)看了下報錯的信息惰许，說是沒有 SDK platform API 26的授權(quán)席覆，于是打開SDK?Manager卸載了? SDK platform API 27 安裝了SDK?platform API 26 繼續(xù)打包裝機(jī)，果然可以訪問數(shù)據(jù)了汹买，折騰了一天佩伤，總算搞定了，這也證明了我當(dāng)初的懷疑是正確的卦睹，的確是安裝的cordova-android平臺與SDK不匹配導(dǎo)致的問題畦戒。
四，項目開始前需要安裝的步驟都已經(jīng)完成了结序，現(xiàn)在進(jìn)行項目的創(chuàng)建障斋，運(yùn)行，以及打包了
1徐鹤，創(chuàng)建項目
? ? 安裝ionic指定版本 垃环，我用的是Ionic CLI 4.12.0? 命令 npm install -g ionic@4.12.0? ? ?cmd輸入 ionic -v 驗證
? ? 安裝cordova指定版本 ，我用的是cordova 8.1.2 命令?npm install -g cordova@8.1.2? ? cmd輸入 cordova -v 驗證
? ? 當(dāng)然也可以直接擼?npm install -g cordova ionic 命令來直接安裝 ionic cordova
執(zhí)行完ionic cordova的安裝后返敬，通過cmd 來輸入?ionic start app tabs（GitBush進(jìn)入到項目目錄下輸入）來創(chuàng)建我們的ionic項目
這個命令包含了tabs? 是指要創(chuàng)建一個包含tabs的app項目遂庄，根據(jù)自己項目的實際需要選擇，具體查看ionic3 CLI文檔
執(zhí)行完命令后劲赠，稍等片刻涛目，瀏覽器自動彈出預(yù)覽界面(Chrome瀏覽器)秸谢，并且支持熱更新，如下圖所示
這里的圖示引用我自己的項目霹肝，沒有創(chuàng)建新的app估蹄，示意執(zhí)行命令?ionic start app tabs 后Chorme 打開ionic 的界面
由此也證明了ionic cordova安裝都沒什么問題
五，打包項目（此處為Android打包）
執(zhí)行命令?ionic cordova build android 默認(rèn)是打的是debug包沫换，要打簽名包就帶上后綴?ionic cordova build android --release
若是項目第一次打包的話臭蚁，時間可能會久一點(diǎn)，具體見下圖
Build Successful? 構(gòu)建成功（失敗是 Build Fail 讯赏。假如失敗的話垮兑，請仔細(xì)查看cmd的報錯信息）
此次打包時間大致為1m 5s，生成的app名字為 android-debug.apk 位置在項目目錄下 platform/android/build/outputs/apk/debug內(nèi)
此時就可以手機(jī)安裝這個debug的apk了漱挎，至于后面如何簽名release包系枪，不在本次教程范圍內(nèi)，有興趣的同學(xué)請自行百度识樱！
注：文章所提到的安裝依賴嗤无，我提供下我的百度云下載鏈接：點(diǎn)這里獲取
提取碼：7rcu
如果這篇文章能幫助到你，我很榮幸怜庸，要是有錯誤的地方当犯，還請指正出來，多包涵割疾！
