Ionic 移动开发入门与实战
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

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实体机设备完成示例应用的发布测试。

提示

由于国内的网络状况，如果即使遵照作者在本节给出的完整步骤也无法成功安装，往往是因为某些站点被屏蔽的关系。建议读者通过一定的技术手段（如购买临时VPN账户）连接到外网来完成安装。

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实体机调试安装步骤。

提示

如果不介意花费一定的金钱并且愿意每年支付维持会员费而成为Apple的专业开发者的读者可以直接考虑参考苹果的官方网站说明来建立个人专属的账户https://developer.apple.com/programs/enroll/。因为申请账户的步骤相当烦琐且苹果已经有过调整相关过程的历史，笔者就不在本书具体说明了。

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开发包并安装

提示

如果安装过程中失败，很大可能性是因为国内的网络状况问题，则读者需要通过一定的技术手段（如购买临时VPN账户）连接到外网来完成安装了。

安装结束后，将显示如图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实体机设备上显示的内容一致，这里就不再重复给出示例图了。

上一章目录下一章