1. 環境依賴關係敘述
移動端混合開發的一個明顯優勢就是，一套代碼兩套部署，開發一套項目代碼，可分別打成Android的包和ios的包。無論是混合開發還是原生開發，都是會需要原生的平臺。我們先以Android平臺爲例，首先肯定需要AndroidSDK,Android環境緣起於java，所以必須先安裝JDk,這是平臺的環境.混合開發顧名思義需要前端和原生兩塊環境內容。混合開發平臺，我們選擇的是cordova,那麼它依賴於node.js環境，並且需要node.js的npm模塊來幫它下載插件。創建項目還需調試運行，那麼就會需要Android模擬器。由於原生的Android模擬器啓動過於慢，而且由於網絡限制，google的cpu渲染加速器環境也難以下載。我們這裏使用的是一個國外的好用且免費的第三方模擬器Genymotion。東西是免費的，但是需要註冊和登陸。
一共需要搭建的環境也就這麼幾個JDK，AndroidSDK,node.js,cordova, Genymotion。
開發環境：
- node.js
- cordova6.0.0
- ionic
測試運行環境：
- JDK
- AndroidSDK
- Genymotion
2.安裝說明
2.1 JDK
安裝教程很多，記住安裝時下載1.8版本
菜鳥教程：http://www.runoob.com/java/ja...
2.2 AndroidSDK
androidSDK由於國內限網，推薦一個國內的一個下載網站：http://www.androiddevtools.cn/
下載後根據提示安裝，推薦下載的包就不要取消。系統一般會幫你默認勾選安卓最新版本Android9.0，但是Android9.0會出現模擬器啓動不了的問題，坑很多，建議安裝9.0以下的，我選的Android6.0，勾選下圖的選項即可。
下載完配置Android環境變量
打開安卓的安卓目錄如圖，我畫圈的兩個目錄，需要加入到path裏面
D:Program Filesandroidplatform-tools; D:Program Filesandroidtools;
2.3Genymotion android模擬器安裝
- 官網下載
官方只需註冊即可免費使用，使用下面鏈接註冊即可。
註冊：https://www.genymotion.com/
下載：https://www.genymotion.com/do...
下載後按照提示安裝即可，打開軟件時登錄選擇個人登錄即可。
- 下載安卓鏡像
打開後如圖，點擊add。
- 找自己需要的版本下載即可
2.4安裝nodejs
- 官網下載nodejs免安裝版
選擇windows免安裝版64位
- 解壓到要安裝的目錄
- 添加環境變量
計算機(右鍵)-->屬性(左鍵)-->高級系統設置(左鍵)-->環境變量(左鍵)
-
檢查是否配置成功
node -v npm -v正常顯示出版本號則說明安裝成功
- 更換npm鏡像源
首先來說爲什麼要更換鏡像源，由於npm的鏡像源是國外的，我們使用npm工具安裝軟件環境時，由於網速問題會導致很多難以解決的問題，而且下載巨慢，故將鏡像源更換爲淘寶的鏡像源。
執行下面命令更換軟件源
npm install -g cnpm --registry=https://registry.npm.taobao.org查看是否更換成功
cnpm -v不報錯且出來一段信息則說明更換成功。
- 參考學習
菜鳥教程：http://www.runoob.com/nodejs/...
w3school:https://www.w3cschool.cn/node...
npm基本使用：https://www.w3cschool.cn/node...
2.5安裝cordova平臺
- 官網
-
使用npm安裝平臺
cnpm install -g [email protected]上面安裝指定版本的cordova，我們這裏安裝cordova6.0.0,建議不要安裝7版本和8版本，後面創建項目時會出現很多問題。
cordova -v檢查是否安裝成功，正確顯示出版本號則說明安裝成功。
-
項目相關命令
#1.創建項目 cordova create MyApp cd ./MyApp #2.添加平臺 cordova platform add browser #添加瀏覽器平臺 cordova platform add android #安卓平臺 cordova platform add ios #ios平臺 #注意添加相關平臺需要擁有相關平臺的環境 #3.編譯打包 cordova build android #打成android平臺的包 .apk cordova build ios #打成ios平臺的包 #4.運行到androidSDK自帶的模擬器 cordova emulate android #5.運行到第三方模擬器或真機 cordova run android - 參考學習
w3school:https://www.w3cschool.cn/cord...
2.6angularjs環境搭建
- 官網
-
安裝項目腳手架
npm install -g @angular/cli這裏只是爲了給ionic創建項目提供環境，但是要使用ionic開發就必須學會angularjs。
2.7ionic安裝配置
- 官網
-
安裝
-g是全局的意思，latest是最新版的意思。
cnpm install -g ionic@latest -
項目相關命令
#1創建項目 ionic start myNewProject tabs #tabs是項目模板的一種，ionic平臺自身會提供幾種項目模板 #進入到項目 cd ./myNewProject #2.添加平臺 ionic cordova platform add android #平臺同上一樣可選 #3.打包 ionic cordova build android #4.運行 ionic serve #運行在瀏覽器 ionic cordova run android #運行到android,ios - 可能會出現的問題
創建項目時，會問你是否使用ionic4創建項目，選擇n即可，也可創建嘗試下，但運行性項目到android模擬器顯示空白。
- 參考學習
- 參考學習
w3school:https://www.w3cschool.cn/cuhk...
3.可能會遇到的問題
- node.js 使用免安裝版能避免許多未知錯誤。
- cordova安裝6.0.0不要安裝7.0或8.0的，後面出現的錯誤會很多。
- cordova添加android平臺，會多次失敗，由於資源在國外會失敗多次，插件下載完成就可以成功。
- 安卓模擬器需要cpu加速器，不然會一直黑屏，所以選用了第三方模擬器。
- 谷歌真機調試chrome://inspect。
- android9.0不能用使用。