ionic環境搭建

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。

開發環境：

1. node.js
2. cordova6.0.0
3. ionic

測試運行環境：

1. JDK
2. AndroidSDK
3. 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 安裝

• 官網下載

  官方只需註冊便可無償使用，使用下面連接註冊便可。

  註冊：https://www.genymotion.com/

  下載：https://www.genymotion.com/do...

  下載後按照提示安裝便可，打開軟件時登陸選擇我的登陸便可。

• 下載安卓鏡像

  打開後如圖，點擊add。

  

​

• 找本身須要的版本下載便可
  

2.4安裝nodejs

• 官網下載nodejs免安裝版

  https://nodejs.org/en/download/

選擇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平臺

• 官網

  https://cordova.apache.org/

• 使用npm安裝平臺

  cnpm install -g cordova@6.0.0

  上面安裝指定版本的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環境搭建

• 官網

  https://www.angular.cn/guide/...

• 安裝項目腳手架

  npm install -g @angular/cli

  這裏只是爲了給ionic建立項目提供環境，可是要使用ionic開發就必須學會angularjs。

2.7ionic安裝配置

• 官網

  https://ionicframework.com/do...

• 安裝

  -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模擬器顯示空白。

• 參考學習

  菜鳥教程：http://www.runoob.com/ionic/i...

  中文文檔：http://www.ionic.wang/js_doc-...

• 參考學習

  w3school:https://www.w3cschool.cn/cuhk...

3.可能會遇到的問題

1. node.js 使用免安裝版能避免許多未知錯誤。
2. cordova安裝6.0.0不要安裝7.0或8.0的，後面出現的錯誤會不少。
3. cordova添加android平臺，會屢次失敗，因爲資源在國外會失敗屢次，插件下載完成就能夠成功。
4. 安卓模擬器須要cpu加速器，否則會一直黑屏，因此選用了第三方模擬器。
5. 谷歌真機調試chrome://inspect。
6. android9.0不能用使用。