iOS 开发

本指南介绍了如何使用 Capacitor 或 Cordova 在 iOS 模拟器和设备上运行和调试 Ionic 应用。iOS 应用只能在安装了 Xcode 的 macOS 上开发。

在 iOS 上运行 Ionic 应用有两种工作流程：

• 使用 Xcode 运行
• 使用 Ionic CLI 运行

Xcode 方式通常更稳定，但 Ionic CLI 方式提供了实时重载功能。

Xcode 设置

Xcode 是用于创建原生 iOS 应用的 IDE。它包含 iOS SDK 和 Xcode 命令行工具。可以使用 Apple 账户免费下载 Xcode，也可以通过 App Store 安装。

安装 Xcode 后，确保已选择使用命令行工具：

xcode-select --install

设置开发团队

所有 iOS 应用都必须进行代码签名，即使是开发阶段也不例外。幸运的是，Xcode 通过自动代码签名使这变得简单。唯一的先决条件是拥有一个 Apple ID。

打开 Xcode 并导航到 Xcode » Preferences » Accounts。如果未列出任何 Apple ID，请添加一个。登录后，Apple ID 的团队列表中将出现一个 Personal Team（个人团队）。

创建 iOS 模拟器

iOS 模拟器可以在 Mac 上模拟 iOS 设备。以下文档是快速设置 iOS 模拟器的方法。有关更多信息，请参阅 Apple 的文档。

打开 Xcode 并导航到 Window » Devices and Simulators。如果尚不存在 iPhone 11 模拟器，请创建一个。

Cordova 设置

Cordova 需要额外的设置才能支持编程式构建。此部分对于 Capacitor 不是必需的。

ios-sim 和 ios-deploy

ios-sim 和 ios-deploy 是在开发过程中将应用部署到 iOS 模拟器和 iOS 设备的工具。它们可以通过 npm 全局安装。

$ npm install -g ios-sim
$ brew install ios-deploy

项目设置

在将应用部署到 iOS 模拟器和设备之前，必须先配置原生项目。

1. 生成本地项目（如果尚不存在）。

   对于 Capacitor，运行以下命令：

   $ ionic capacitor add ios

   对于 Cordova，运行以下命令：

   $ ionic cordova prepare ios

2. 设置包 ID。

   对于 Capacitor，打开 capacitor.config.json 文件并修改 appId 属性。

   对于 Cordova，打开 config.xml 文件并修改根元素 <widget> 的 id 属性。有关更多信息，请参阅 Cordova 文档。

3. 在 Xcode 中打开项目。

   对于 Capacitor，运行以下命令在 Xcode 中打开应用：

   $ ionic capacitor open ios

   对于 Cordova，打开 Xcode。使用 File » Open 并找到应用。打开应用的 platforms/ios 目录。

4. 在 Project navigator 中，选择项目根目录以打开项目编辑器。在 Identity 部分，验证之前设置的包 ID 与 Bundle Identifier 匹配。

   

5. 在同一项目编辑器的 Signing 部分，确保启用 Automatically manage signing。 然后，选择一个 Development Team。给定 Development Team 后，Xcode 将尝试自动准备配置文件（provisioning）和签名。

   

使用 Xcode 运行

在此工作流程中，Xcode 可以自动修复可能发生的常见编译和签名问题。

1. 开发 Ionic 应用并同步到原生项目。

   每次有意义的更改后，Ionic 应用必须先构建为 Web 资源，更改才能出现在 iOS 模拟器和设备上。然后，Web 资源必须复制到原生项目中。幸运的是，这个过程通过一个 Ionic CLI 命令就变得很简单。

   对于 Capacitor，运行以下命令：

   $ ionic capacitor copy ios
   $ ionic capacitor update

   对于 Cordova，运行以下命令：

   $ ionic cordova prepare ios

2. 在 Xcode 中，选择目标模拟器或设备，然后点击播放按钮。

   

使用 Ionic CLI 运行

Ionic CLI 可以通过单个命令构建、复制和部署 Ionic 应用到 iOS 模拟器和设备。它还可以启动一个开发服务器（类似于 ionic serve 中使用的服务器），以提供实时重载功能。

使用实时重载，对应用源文件的更改会触发 Web 资源的重新构建，并且更改会立即反映在模拟器或设备上，无需重新部署。

注意

对于 iOS 设备，设备和计算机需要连接到同一 Wi-Fi 网络。还需要一个开发服务器的外部 URL，以便设备可以连接到它。使用 --external（或 --host=0.0.0.0）绑定到外部地址。

Capacitor 的实时重载

Capacitor 目前还没有构建原生项目的方法。它依赖 Xcode 来构建和部署应用二进制文件。但是，Ionic CLI 可以启动一个实时重载服务器，并通过单个命令配置 Capacitor 使用它。

运行以下命令，然后在 Xcode 中选择目标模拟器或设备并点击播放按钮：

ionic capacitor run ios -l --external

Cordova 的实时重载

Cordova 可以编程式地构建和部署原生项目。

要启动实时重载服务器、构建和部署应用，请运行以下命令：

ionic cordova run ios -l --external

调试 iOS 应用

在 iOS 设备或模拟器上运行应用后，可以在 Safari 中进行调试。

使用 Safari Web Inspector

Safari 为 iOS 模拟器和设备提供 Web Inspector 支持。打开 Develop 菜单，选择模拟器或设备，然后选择 Ionic App 打开 Web Inspector。

备注

如果 Develop 菜单被隐藏，请在 Safari » Preferences » Advanced » Show Develop menu in menu bar 中启用它。

如果应用没有列出，可能需要在设备的 Settings » Safari » Advanced » Web Inspector 中启用 Web Inspector。

查看原生日志

如果使用 Xcode 运行，原生日志可以在 Xcode 的 Console 中找到。

备注

如果 Console 被隐藏，请在 View » Debug Area » Activate Console 中启用它。