Capacitor App 初始化：分步指南

想用一套代码构建移动应用吗？ Capacitor 让您能够使用以下框架轻松创建 iOS、Android 和 Web 应用： React, Angular，或者 Vue. 本指南将介绍如何设置 Capacitor、配置平台并高效部署更新。

入门关键步骤：

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

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

使用 Capgo 实现 NATIVE APP 的 5 个步骤 CAPACITOR | Ionic 发布指南

所需工具与环境搭建

以下是使用必备工具配置开发环境的步骤。

开发工具安装

若要使用 Capacitor，您需要以下工具：

请按照以下步骤进行安装：

• Node.js 和 npm：请从官方网站下载并安装 Node.js 官网.
• Code 编辑器：选择一个编辑器，例如 VS Code， WebStorm，或者 Sublime Text 并安装最新的稳定版本。
• Git：请前往 git-scm.com.
• 特定平台的工具：安装对应平台的工具，例如 Xcode （适用于 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]高效运行。它简化了构建、测试和部署 App 的流程。

启动全新的 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 Identifier：确保其与您的 appId 一致。
• 开发团队：分配相应的团队以进行 code 签名。
• 部署目标：设置最低 iOS 版本。
• 设备方向：根据需要进行调整。
• 隐私权限说明：在以下位置添加必要的描述： Info.plist.

Android

使用以下方式打开 Android 项目：

npx cap open android

然后，更新这些设置：

• 包名: 确保它与你的 appId 一致。
• 权限: 在以下位置定义必要权限 AndroidManifest.xml.
• 屏幕方向: 在以下位置配置此项 AndroidManifest.xml.
• 目标 SDK: 在以下位置设置合适的版本 android/app/build.gradle.

资源与配置位置

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

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

构建与测试

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

构建与运行命令

一旦你的 App 完成了移动端平台配置，就可以开始构建并运行测试了。首先更新你的 Web 资源：

npm run build
npx cap sync

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

针对 iOS：

npx cap run ios

针对 Android：

npx cap run android

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

添加 Capacitor 插件

Capacitor 插件 可以让你为 App 添加原生功能。例如，要包含摄像头、地理位置和存储功能，请运行：

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

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

配合使用 Live Updates Capgo

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

要在应用中添加 Capgo：

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 Initialization: Step-by-Step Guide

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