2.3　Mac OS下安裝iOS與Android開發平臺

使用Mac OS（以下簡稱為OSX）的一個相對優勢就是如果配置得當，可以在一臺開發機上同時為iOS與Android這兩種移動平臺編譯、部署和測試App應用。因此建議有條件的讀者考慮使用MacBook Air或Mac mini來做開發機。本節將介紹在Mac OS下安裝開發iOS的軟件包Xcode和Android開發工具Android Studio，并分別使用iOS模擬器和Android實體機設備完成示例應用的發布測試。

2.3.1　安裝Xcode

安裝Xcode是開發運行在iOS上的App應用的前提。Xcode的安裝步驟比較簡單，進入OSX桌面后，點擊桌面工具欄的“Lauchpad”圖標。隨后在彈出的列表窗口中選擇“App Store”進入蘋果的應用商店，再在應用商店的搜索欄中輸入“Xcode”，最左邊將會出現Xcode的應用安裝圖標，在圖2.29中點擊“獲取”或“打開”按鈕即可進入正常的安裝過程。

圖2.29　使用蘋果的應用商店安裝Xcode

2.3.2　為測試項目增加iOS平臺支持

Xcode安裝完畢后，即可馬上驗證一下在2.1.6節創建的測試項目是否能構建出iOS平臺的應用了。進入2.1.6節創建的測試項目根目錄后在命令行窗口中輸入：

     ioniccordovaplatform add ios

Ionic CLI會自動下載所需資源并配置完所有的內容。命令行窗口顯示輸出的結果與圖2.27顯示的內容基本相似，除了里面android的字樣改為ios以外。筆者這里就不重復帖圖了。

2.3.3　連接iOS模擬器測試App

為測試項目增加iOS平臺支持成功完成后，即可繼續使用Ionic CLI調用Xcode完成項目的編譯、鏈接、生成、部署到iOS模擬器中并啟動。需要在測試項目根目錄中輸入的命令是：

     ioniccordovarun ios

經過一定時間的構建，最終將出現如圖2.30所示的iPhone 8模擬器運行界面。

圖2.30　iOS設備模擬器運行測試項目App

使用iOS設備模擬器來測試的一個好處就是能夠比較方便地動態切換各種型號的設備查看界面布局，如圖2.31所示。

圖2.31　iOS設備模擬器切換不同型號的測試設備

2.3.4　低成本連接iOS實體機設備測試App

iOS模擬器只能滿足部分開發基于iOS的App應用時的需要，畢竟未來App是要運行在實體機上，而且有些設備專有的硬件功能也需要實體機調試才能確保萬無一失。出于真機調試的必要性，筆者決定介紹在考慮廣大讀者經濟負擔情況下的iOS實體機調試安裝步驟。

1．獲取實體機設備的UDID

將iOS實體機設備連接電腦，打開iTunes并點擊如圖位置，點擊的過程中會切換顯示手機的各種配置信息，最后會出現40位的UDID（設備唯一標識符），如圖2.32所示。

圖2.32　獲得iOS設備UDID

2．獲得.p12文件和.mobileprovision文件并導入

隨后根據獲取到的實體機設備的UDID：

?　讀者有認識的已經擁有Apple開發個人賬戶的親友，可以請求他們幫忙根據UDID生成后綴名為.p12的證書文件和后綴名為.mobileprovision的文件。

?　可以到淘寶上購買生成.p12文件和.mobileprovision文件的服務，費用也非常低廉。

獲得.p12文件和.mobileprovision文件后，在OSX開發機上依序雙擊這兩個文件，接受系統的默認導入方式提示，即完成了指定iOS實體機設備的測試登記。

3．測試連接iOS實體機設備

現在可以使用USB連接線將iOS實體機設備連接到OSX開發機上，并對所有的彈出警告框全部接受。隨后在命令行窗口進入OSX開發機上的項目目錄，輸入：

     Ioniccordova run ios--device

Ionic CLI將調用Xcode自動完成項目的編譯、鏈接和部署到用于測試的iOS實體機設備并啟動調試模式。讀者按照步驟運行到這里時，用于測試的App應用也應該安裝在iOS實體機設備里并顯示主頁面窗口了。

2.3.5　安裝Android開發環境

1．安裝／更新JDK

類似于2.2.1節介紹的步驟，建議在OSX中安裝最新的JDK，同樣是到http://www.oracle.com/technetwork/Java/javase/downloads/index.html選擇對應操作系統的JDK版本下載后直接安裝。

安裝結束后，也需要配置JAVA_HOME環境變量。為方便起見，下面以筆者的OSX下JDK安裝路徑是/Library/Java/JavaVirtualMachines/jdk1.8.0_151/Contents/Home為例。在命令行窗口中，執行以下命令即可：

     exportJAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_151/Contents/Home

2．安裝Android Studio

到Android開發者網https://developer.android.com/studio/index.html#downloads下載對應操作系統平臺Android Studio，請參考2.2.1節里的圖2.24。如果因網絡問題無法連接官方網站，可考慮到國內的軟件下載網站去找。

下載完畢后，雙擊被下載到本地的.dmg文件，會出現如圖2.33所示的安裝提示窗口。

圖2.33　Android Studio安裝提示窗口

拖動圖中左邊Android Studio圖標到右邊的Applications目錄里就完成初步安裝了。

隨后需要雙擊右邊的Applications目錄夾，打開如圖2.34所示的Applications目錄，再雙擊左側的Android Studio圖標啟動它。

圖2.34　啟動Android Studio

隨即Android Studio會開始執行初始化Setup。此處需要記下對話框中顯示的SDK Folder路徑，以圖2.35為例是/Users/Lym/Library/Android/sdk，然后在Verify Settings對話框中點擊Finish即可。

圖2.35　啟動Android Studio安裝所需組件

Android Studio會開始連接下載網站下載Android開發包并安裝，如圖2.36所示。

圖2.36　Android Studio連接下載網站下載Android開發包并安裝

安裝結束后，將顯示如圖2.37所示的Android Studio歡迎界面。此時需要點擊下方的Configure下拉按鈕，選擇其中的SDK Manager來安裝稍低版本的SDK和工具。

圖2.37　Android Studio歡迎界面

在隨后出現的窗口的左邊導航欄，點擊選擇Appearance & Behavior→System Settings→Android SDK，然后在右邊的SDK Platforms選項頁內，選中最新的幾個版本，如圖2.38所示。接著再切換到SDK Tools選項頁，選中如圖2.39所示被選中的項目，點擊OK按鈕后會顯示如圖2.40的SDK Quickfix Installation窗口，等待它執行下載安裝完畢就可以了。

圖2.38　安裝指定版本SDK Platforms

圖2.39　安裝指定版本SDK Tools

圖2.40　SDK Quickfix Installation窗口

最后需要做的就是類似2.2.1節所做的，還要設置ANDROID_HOME環境變量和路徑，以筆者的操作系統環境為例需要執行的命令是：

         export ANDROID_HOME=/Users/Lym/Library/Android/SDK
         exportPATH=${PATH}:/Users/Lym/Library/Android/SDK/platform-tools:/Users/Lym
     /Library/Android/SDK/tools

2.3.6　為測試項目增加Android平臺支持

現在可以回到Ionic CLI為2.1.6節創建的測試項目配置Android平臺支持了。與圖2.27類似，進入項目目錄后在命令行窗口中輸入：

     ioniccordovaplatform add android

Ionic CLI會自動下載所需資源并配置完所有的內容。

2.3.7　連接Android實體機設備測試App

上述步驟完成后，就可以用USB線連接Android實體機設備和OSX開發機測試一下App了。如果讀者像筆者一樣用的是國內的廠商提供的Android設備，Android SDK Manager可能會因為無法識別而不能連接。因此出于保險起見，讀者可以先進入OSX的Launchpad→其他→系統信息，在彈出的窗口左側導航樹中點擊USB項目，然后在右邊的USB Device Tree視圖里找到通過USB線連接的Android實體機設備的廠商ID。以筆者為例，小米手機的廠商ID為0x2717，如圖2.41所示。

圖2.41　在System Information窗口查找Android設備Vendor ID

隨后在命令行窗口中執行：

     echo"0x2717">> ~/.android/adb_usb.ini

然后我們需要在手機的開發者選項中，打開啟動USB調試功能，并在連接電腦時把僅限充電修改為傳輸文件（MTP）。

最后就是進入項目目錄后在命令行窗口中執行命令來使用Android實體機設備測試App：

     ioniccordovarun android--device

如果前面的步驟都順利完成，Ionic CLI將能成功找到Android實體機設備。

如果構建過程一切順利，Ionic CLI將能在Android實體機設備成功部署和啟動測試App。此時連接的Android實體機設備應該如本書2.2.3節的圖2.28所示啟動了測試App。因為Android實體機設備上顯示的內容一致，這里就不再重復給出示例圖了。