Capacitor 移动应用初始化指南

Want to build mobile apps with a single codebase? Capacitor makes it easy to create iOS, Android, and web apps using frameworks like React, Angular, or Vue. This guide explains how to set up Capacitor, configure platforms, and deploy updates efficiently.

开始步骤:

• 安装工具: Node.js, npm, Git, 和一个 code 编辑器 VS Code.
• 设置 Capacitor: 安装 Capacitor CLI 并初始化您的项目
• 配置平台: 添加 iOS 和 Android 支持，调整设置，并同步您的 code
• 测试和部署: 构建，运行设备，并使用实时更新工具 Capgo for seamless updates.

Capacitor 将 Web 应用程序与本机设备功能连接起来，确保跨平台的smooth性能。按照本指南简化您的应用程序开发过程！

5 步创建本机应用程序 CAPACITOR | ionic 发布指南

所需工具和设置

以下是如何设置开发环境的必备工具。

开发工具安装

要与 Capacitor 一起工作，您需要以下工具：

按照以下步骤安装它们:

• Node.js 和 npm: 从官方 Node.js 网站.
• 下载并安装 Code 编辑器: 选择一个编辑器，如 VS Code WebStorm, 或 Sublime Text 并安装最新稳定版本
• Git: 从这里获取 git-scm.com.
• 平台相关工具: 安装与您的平台相关的工具，如 Xcode 用于 macOS 或 Android Studio 用于 Android 开发。

Once these are installed, you’re ready to move on to setting up the 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 文件中调整你的项目设置。

Configuring capacitor.config.json

配置 __CAPGO_KEEP_0__.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 匹配。
• Permissions: 在 AndroidManifest.xml.
• Screen Orientation: 在 AndroidManifest.xml.
• Target SDK: 设置适当的版本在 android/app/build.gradle.

Asset and Configuration Locations

这里是您将找到应用程序图标、启动屏幕、深度链接和权限的关键文件：

这些配置就绪后，您可以在移动设备上构建和测试应用程序。

构建和测试

使用之前概述的设置，您现在可以构建和测试您的 Capacitor 应用程序

以确保它在各种设备上正常工作。

构建和运行命令

npm run build
npx cap sync

一旦您的应用程序针对移动平台配置完成，就该开始构建和运行测试了。首先更新您的Web资产：

For iOS：

npx cap run ios

For Android：

npx cap run android

这些命令将在模拟器或连接设备上构建并启动您的应用。测试在真实设备和模拟器上都非常重要，以便识别任何平台特定的问题。

添加Capacitor插件

Capacitor插件 允许您将本机功能添加到应用中。例如，要包含相机、地理位置和存储功能，请运行：

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

安装后，在您的本机项目中配置插件。以下是设置要求的快速概述：

实时更新与 Capgo

为了简化部署和测试，您可以将实时更新工具集成到 Capgo 中。这项服务已经交付了超过 2350 万次更新，95% 的用户在 24 小时内接收到更新，全球成功率达 82% [1].

To add Capgo to your app:

npm install @capgo/capacitor-updater
npx cap sync

Capgo offers several benefits during testing:

• 创建独立的开发、测试和生产环境。
• 在测试期间立即推送 bug 修复。
• 使用内置分析跟踪更新成功率。
• 如果出现问题，可以快速回滚更新。

Capgo 还确保了安全的更新传递，使用端到端加密。其通道系统允许您在测试更新之前将其推送给特定用户组，然后再推送给所有用户。

概要

本指南已逐步介绍了设置和部署Capacitor应用程序的每个阶段，涵盖了启动和确保平稳运行所需的所有关键步骤。

主要内容

创建Capacitor应用程序需要仔细关注设置、配置和平台特定调整。设置您的开发环境，包括工具，如 Node.js 和 Capacitor CLI - 是一个关键的起点。配置像 iOS 和 Android 这样的平台确保应用程序在本机系统上运行得无缝。

使用一个更新系统，如 Capgo 可以简化发布管理并帮助保持应用程序的稳定性 [1].

以下是关键阶段的分解:

从 Capacitor App 初始化指南继续

如果您正在使用 Capacitor App 初始化指南: 步骤指南 为 CI/CD 自动化做好准备，连接它到 Capgo CI/CD 产品工作流程中的 Capgo CI/CD, Capgo 原生构建 产品工作流程中的 Capgo 原生构建, Capgo 集成 产品工作流程中的 Capgo 集成, CI/CD 集成 CI/CD 集成的实现细节， GitHub 动作集成 CI/CD 集成的实现细节中的 GitHub 动作集成.