跳到主要内容
版本:v7

部署到 iOS 和 Android

由于我们在创建项目时已经添加了 Capacitor,距离 Photo Gallery 应用运行在我们的设备上只剩几个步骤了!

Capacitor 设置​

Capacitor 是 Ionic 的官方应用运行时,使得将 Web 应用部署到 iOS、Android 等原生平台变得简单。如果您过去使用过 Cordova,请考虑阅读更多关于 Capacitor 与 Cordova 之间的差异的内容。

如果您仍在终端中运行 ionic serve,请取消它。完成 Ionic 项目的新构建,修复它报告的任何错误:

ionic build

接下来,创建 iOS 和 Android 项目:

ionic cap add ios
ionic cap add android

项目根目录下会创建 android 和 ios 文件夹。这些是完全独立的原生项目,应被视为 Ionic 应用的一部分(即,将它们纳入源代码管理,使用它们的原生工具进行编辑等)。

每次执行构建(例如 ionic build)更新 Web 目录(默认:www)时,您都需要将这些更改复制到原生项目中:

ionic cap copy

注意:在对代码的原生部分进行更改(例如添加新插件)后,使用 sync 命令:

ionic cap sync

iOS 部署​

important

要构建 iOS 应用,您需要一台 Mac 电脑。

Capacitor iOS 应用通过 Xcode(Apple 的 iOS/Mac IDE)进行配置和管理,依赖项由 CocoaPods 管理。在 iOS 设备上运行此应用之前,需要完成几个步骤。

首先,运行 Capacitor open 命令,它会在 Xcode 中打开原生 iOS 项目:

ionic cap open ios

为了使某些原生插件正常工作,必须配置用户权限。在我们的照片库应用中,这包括 Camera 插件:iOS 在第一次调用 Camera.getPhoto() 后会自动显示一个模态对话框,提示用户允许应用使用摄像头。驱动此功能的权限标记为"Privacy - Camera Usage"。要设置它,必须修改 Info.plist 文件(更多关于 iOS 配置的详细信息)。要访问它,点击"Info",然后展开"Custom iOS Target Properties"。

Xcode 中的 Info.plist 文件,显示为摄像头访问添加的 NSCameraUsageDescription 键。

Info.plist 中的每个设置都有一个低层参数名和一个高层名称。默认情况下,属性列表编辑器显示高层名称,但切换到显示原始的、低层名称通常很有用。为此,右键单击属性列表编辑器中的任意位置,并切换"Raw Keys/Values"。

添加 NSCameraUsageDescription 键,并将值设置为描述为什么应用需要使用摄像头的说明,例如"拍照"。当权限提示打开时,Value 字段会显示给应用用户。

按照相同的过程添加 Camera 插件所需的其他两个键:NSPhotoLibraryAddUsageDescription 和 NSPhotoLibraryUsageDescription。

接下来,点击左侧项目导航器中的 App,然后在 Signing & Capabilities 部分中,选择您的开发团队。

Xcode 界面显示 iOS 应用项目的 Signing and Capabilities 选项卡。

权限设置好并且选择了 Development Team 后,我们准备在真实设备上尝试应用!将 iOS 设备连接到 Mac 电脑,选择它(对我来说是 App -> Matthew's iPhone),然后点击"Build"按钮来构建、安装和启动设备上的应用:

Xcode 工具栏突出显示用于编译和运行 iOS 应用的 Build 按钮。

点击 Photo Gallery 选项卡上的 Camera 按钮后,权限提示将显示。点击 OK,然后用摄像头拍照。之后,照片会显示在应用中!

两个 iPhone 并排,一个显示摄像头权限提示,另一个显示应用拍摄的照片。

Android 部署​

Capacitor Android 应用通过 Android Studio 进行配置和管理。在 Android 设备上运行此应用之前,需要完成几个步骤。

首先,运行 Capacitor open 命令,它会在 Android Studio 中打开原生 Android 项目:

ionic cap open android

与 iOS 类似,我们必须启用正确的权限才能使用摄像头。在 AndroidManifest.xml 文件中配置这些。Android Studio 可能会自动打开此文件,但如果未打开,请在 android/app/src/main/ 下找到它。

Android Studio 编辑器显示包含摄像头权限的 AndroidManifest.xml 文件。

滚动到 Permissions 部分,确保包含以下条目:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

保存文件。权限设置好后,我们准备在真实设备上尝试应用!将 Android 设备连接到电脑。在 Android Studio 中,点击"Run"按钮,选择已连接的 Android 设备,然后点击 OK 来构建、安装和启动设备上的应用。

Android Studio 界面,箭头指向 Run 按钮和已连接的设备。

再一次,点击 Photo Gallery 选项卡上的 Camera 按钮后,权限提示应该会显示。点击 OK,然后用摄像头拍照。之后,照片应该会出现在应用中。

两个 Android 手机并排,一个显示摄像头权限提示,另一个显示应用拍摄的照片。

我们的 Photo Gallery 应用刚刚部署到了 Android 和 iOS 设备上。

在本教程的最后一部分,我们将使用 Ionic CLI 的 Live Reload 功能快速实现照片删除 - 从而完成我们的 Photo Gallery 功能。