一、前言

我們這邊有一個專案需要使用ionic+cordova+angular開發一款app，後期因為部分原因需要使用Mac系統進行開發。我整理了在Mac上面搭建ionic環境的步驟。

二、開發環境搭建

1、安裝Visual Studio Code

下載地址：https://code.visualstudio.com/

安裝完成以後配置使用者環境變數（以下命令在終端Terminal中操作）

vim ~/.bash_profile   #~/.bash_profile不存在則建立
export PATH=/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin:$PATH
 
    #在開啟的bash_profile檔案中輸入。輸入完成儲存退出bash_profile
source ~/.bash_profile    #讓這個配置檔案在修改後立即生效
code .     #在需要通過vscode開啟的檔案目錄下輸入該命令

2、安裝node.js

下載地址：https://nodejs.org/en/

雙擊安裝包一直點選繼續即可。

安裝完成以後，在終端Terminal輸入以下命令檢視是否安裝成功：

node  -v
npm   -v

3、安裝ionic和cordova（在終端Terminal中輸入以下命令）

npm install -g ionic cordova  #
 
也可以通過sudo cnpm install -g ionic cordova

4、檢視ionic和cordova是否安裝成功（在終端Terminal中輸入以下命令）

ionic –v      #檢視顯示版本號，安裝成功
cordova –v      #檢視顯示版本號，安裝成功

5、安裝yarn（以下命令在終端Terminal中輸入）

你可以通過Homebrew包管理工具安裝Yarn。如果你還未安裝Node.js，Homebrew會自動為你安裝。

a、安裝Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)
 
"      #國外映象安裝

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"       #國內映象安裝（因為國內使用國外映象容易失敗所以個人建議使用國內映象）

b、繼續安裝Yarn

brew install yarn      #安裝
yarn -v         #檢視版本號

6、安裝 Angular CLl

npm install -g @angular/cli     #安裝
ng v                            #檢視版本號

三、打包Android平臺環境搭建

參考官方說明：

（中文）http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html

（英文）http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html

1、通過Android studio 來安裝SDK

a、Android studio下載地址：https://developer.android.google.cn/studio/

b、下載完成以後安裝Android Studio（按照提示完成安裝）

c、配置環境變數

在Mac上面，你可以使用文字編輯器來建立或者修改檔案~/.bash_profile（在終端Terminal中輸入vim ~/.bash_profile進行編輯）。為了設定一個環境變數，新增一行，使用export像下面這樣(用你本地安裝路徑替代路徑):

export ANDROID_HOME=/Users/mac/Library/Android/sdk

為了更新PATH,新增一行類似下面這樣(路徑替換為你本地的Android SDK安裝路徑):

export PATH=${PATH}:/Users/mac/Library/Android/sdk/platform-tools:/Users/mac/Library/Android/sdk/tools

重新啟動終端或者執行下面命令來看變化帶來的反應:

source ~/.bash_profile

在終端（Terminal）輸入以下命令，檢視是否配置成功

adb version

2、Java開發工具包(JDK)

安裝Java Development Kit (JDK) 7或者最新的（根據程式中的platforms/android/cordova/lib/check_reqs.js可以檢視程式支援的jdk版本，個人使用的為1.8.0）。

3、配置Gradle(一個構建工具)

自[email protected]起,Cordova為Android專案使用Gradle構建。關於用Ant構建的說明，請參考老版本的文件。

下載地址：https://services.gradle.org/distributions/

選擇下載：gradle-6.7.1-all.zip

a、解壓gradle-6.7.1-all.zip（在終端Terminal輸入以下命令）

cd /users/mac/downloads     #進入下載資料夾
unzip gradle-6.7.1-all.zip      #解壓下載的gradle壓縮檔案

b、設定環境變數（在終端Terminal輸入以下命令）

vim ~/.bash_profile      #~/.bash_profile不存在則建立
export GRADLE_HOME=/users/mac/downloads/gradle-6.7.1     #在開啟的bash_profile檔案中輸入
export PATH=$PATH:$GRADLE_HOME/bin     #在開啟的bash_profile檔案中輸入。輸入完成儲存退出bash_profile。
source ~/.bash_profile    #讓這個配置檔案在修改後立即生效
gradle -version     #檢視是否設定成功

四、執行一個ionic種子專案

1、使用其中一個預製的應用程式模板建立一個Ionic應用程式，或者使用空白模板來重新建立。三種最常見的啟動器是blank啟動器，tabs啟動器和sidemenu啟動器。開始使用以下ionic start命令：

ionic start myApp tabs    #建立一個名為myApp的模板程式

sudo ionic serve      #通過web的方式執行
sudo ionic cordova run android -l         #通過Android虛擬機器或者外接手機的方式安裝並執行（執行該命令時必須先開啟虛擬機器或者通過資料線連線手機）

a、sudo ionic serve執行效果：

b、sudo ionic cordova run android -l 執行效果：

五、簽名打包一個Android apk應用

1、首先在終端Terminal中進入專案根目錄執行以下命令生成Android平臺。

cordovaplatformaddandroid      #生成Android平臺

2、配置應用簽名：在根目錄下執行以下命令

keytool -genkey -v -keystore myApp.keystore -alias myApp -keyalg RSA -keysize 2048 -validity 20000

命令說明：

　 -genkey                         #產生金鑰 
   -alias pbnEoC.keystore         #別名 demo.keystore 
   -keyalg                         #RSA 使用RSA演算法對簽名加密 
   -validity 20000                #有效期限2000天 
   keysize:                        #大小
   -keystore pbnEoC.keystore      #證書的別名

結果如下：會在根目錄生成一個myApp.keystore的檔案

3、打包簽名以後的Android apk應用

cordova build android --release -- --keystore=myApp.keystore --storePassword=123qwe --alias=myApp --password=123qwe    

命令說明：

--keystore           #剛剛生成的簽名檔案
--storePassword       #keystore儲存金鑰
--password              #私有key的密碼
--alias                     #用來指定私有key用來簽名
--keystoreType         #    預設: 自動檢測基於副檔名pkcs12或者jks

結果如下：會生成一個apk安裝包，在手機上安裝就可以正常使用了