Capacitor 应用初始化：分步指南

想用单一代码库构建移动应用？ Capacitor 让你能使用各种框架轻松创建 iOS、Android 和 Web 应用 React, Angular，或 Vue。本指南介绍如何设置 Capacitor、配置平台并高效部署更新。

入门关键步骤：

• 安装工具: Node.js、npm、Git，以及 code 编辑器，例如 对比 Code.
• 设置 Capacitor：安装 Capacitor CLI 并初始化你的项目。
• 配置平台：添加 iOS 和 Android 支持，调整设置，并同步您的 code。
• 测试与部署：构建、在设备上运行，并使用 live update 工具，例如 Capgo 以实现无缝更新。

Capacitor 将 Web 应用与原生设备功能桥接，确保跨平台流畅性能。遵循本指南以简化您的应用开发流程！

5 步打造原生应用 CAPACITOR | Ionic 发布指南

必备工具与环境准备

下面介绍如何用必备工具配置开发环境。

开发工具安装

要使用 Capacitor，你需要以下工具：

请按照以下步骤安装：

• Node.js 和 npm：从官方下载并安装两者 Node.js 网站.
• Code 编辑器：选择 VS Code 等编辑器， WebStorm，或 Sublime Text 并安装最新稳定版。
• Git：从以下地址获取 git-scm.com.
• 平台专用工具：安装适用于你平台的工具，例如 Xcode 的 Mac 适用于 macOS 或 Android Studio 中的错误日志 用于 Android 开发。

安装完成后，即可开始配置 Capacitor CLI。

Capacitor CLI 配置

按照以下步骤启动并运行 Capacitor CLI：

1. 全局安装 Capacitor CLI

   打开终端并运行以下命令：

   npm install -g @capacitor/cli

2. 初始化 Capgo 插件

   如果尚未执行此操作，请运行：

   npx @capgo/cli init

   这将配置必要的设置以 管理更新 高效地 [1]。它简化了构建、测试和部署应用的过程。

开始一个新的 Capacitor 项目

安装好必要的工具后，就可以开始搭建第一个 Capacitor 项目了。下面介绍如何开始。

创建你的项目

要创建一个新的 Capacitor 项目，请打开终端并运行以下命令：

npx @capacitor/cli create [projectDirectory] [appId] [appDisplayName]

例如：

npx @capacitor/cli create my-cap-app com.example.app "My Capacitor App"

各参数含义如下：

• projectDirectory：项目文件夹的名称（例如： my-cap-app).
• appId：应用的反向域名标识符（例如： com.example.app).
• appDisplayName：应用的显示名称（例如： My Capacitor App).

运行此命令后，你需要在其中调整项目设置 capacitor.config.json 文件。

配置 capacitor.config.json

本指南中介绍的 capacitor.config.json 该文件用于定义项目的关键设置。下面是一个基础配置示例：

{
  "appId": "com.example.app",
  "appName": "My Capacitor App",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "server": {
    "hostname": "app.example.com",
    "androidScheme": "https",
    "iosScheme": "https"
  }
}

以下是关键选项的详细说明：

安装依赖

要完成配置，请安装所需依赖项，并使用以下命令初始化项目：

npm install @capacitor/core
npm install @capacitor/cli --save-dev
npx cap init

完成这些步骤后，您的项目即可进行平台特定配置和开发。

配置移动端平台

初始化 Capacitor 项目后，下一步是添加并配置 iOS 和 Android 平台，以便应用能在移动设备上原生运行。

iOS 与 Android 环境搭建

首先，使用以下命令添加平台支持：

npx cap add ios
npx cap add android

添加平台后，使用以下命令同步您的 Web code：

npx cap sync

在运行这些命令之前，请确保您的 Web 应用已构建，并且 webDir 中的 capacitor.config.json 已正确设置。完成后，请根据应用需求自定义各平台的配置。

平台专属设置

iOS

使用以下命令打开 iOS 项目：

npx cap open ios

然后，配置以下设置：

• Bundle 标识符：确保与您的 appId 一致。
• 开发团队：为 code 签名分配相应的团队。
• 部署目标：设置最低 iOS 版本。
• 设备方向：请根据需要调整。
• 隐私描述：在 Info.plist.

Android

使用以下命令打开 Android 项目：

npx cap open android

然后，更新以下设置：

• 包名：确保它与你的 appId 匹配。
• 权限：在 AndroidManifest.xml.
• 屏幕方向：在此处配置 AndroidManifest.xml.
• 目标 SDK：在对应位置设置合适的版本 android/app/build.gradle.

资源与配置位置

你可以在这里找到应用图标、启动页、Deep Links 和权限相关的关键文件：

完成这些配置后，你就可以在移动设备上构建并测试你的应用了。

构建与测试

利用前面介绍的配置，你现在可以构建并测试你的 Capacitor 应用 以确保其在各种设备上都能正常运行。

构建与运行命令

一旦您的应用配置好移动平台，就可以开始构建并运行测试了。首先更新您的 Web 资源：

npm run build
npx cap sync

接下来，根据您的目标平台使用相应的命令：

iOS 端：

npx cap run ios

针对 Android：

npx cap run android

这些命令将在模拟器或已连接的设备上构建并启动您的应用。在真机和模拟器上同时进行测试，对于发现平台特定问题至关重要。

添加 Capacitor 插件

Capacitor 插件 让您能为应用添加原生功能。例如，要加入相机、地理定位和存储功能，请运行：

npm install @capacitor/camera @capacitor/geolocation @capacitor/storage
npx cap sync

安装完成后，请在原生项目中配置插件。以下是配置要求的快速概览：

结合 Live Updates Capgo

为了简化部署和测试，你可以集成 live update 工具，例如 Capgo。该服务已交付超过 2350 万次更新，95% 的用户在 24 小时内收到更新，全球成功率达 82%。 [1].

要将 Capgo 添加到你的 App：

npm install @capgo/capacitor-updater
npx cap sync

Capgo 在测试阶段有以下几个好处：

• 为开发、staging 和生产环境创建独立的 Channel。
• 在测试期间即时推送 Bug 修复。
• 通过内置分析追踪更新成功率。
• 出现问题时可快速回滚更新。

Capgo 还通过端到端加密确保更新交付的安全性。其 Channel 系统让你可以先和特定用户群测试更新，再推送给全体用户。

总结

本指南已完整覆盖 Capacitor 应用搭建与部署的各个阶段，涵盖入门和确保平稳运行所需的全部关键步骤。

核心要点

创建 Capacitor 应用时，需要仔细处理搭建、配置和针对各平台的调整。配置开发环境，包括如下工具： Node.js 以及 Capacitor CLI - 这是至关重要的起点。配置 iOS 和 Android 等平台，可确保应用在原生系统上无缝运行。

使用类似以下的更新系统 Capgo 可以简化发布管理并帮助保持应用稳定性。 [1].

以下是关键阶段的详细分解：

继续阅读 Capacitor App 初始化：分步指南

如果你正在使用 Capacitor 应用初始化：分步指南 规划 CI/CD 自动化，并将其与 Capgo CI/CD 集成 用于 Capgo CI/CD 中的产品工作流， Capgo Native Build 用于 Capgo Native Builds 中的产品工作流， Capgo 集成 用于 Capgo 集成中的产品工作流， CI/CD 集成 了解 CI/CD 集成的实现细节，以及 GitHub Actions 集成 有关 GitHub Actions 集成的实现细节。