Capacitor移动应用初始化指南：一步步指南

想用单一代码库构建移动应用吗? Capacitor 让您轻松创建使用框架如 React, Angular,或 Vue。 本指南将解释如何设置 Capacitor，配置平台，并高效地部署更新。

开始的关键步骤：

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

: 构建，运行在设备上，并使用像 Capacitor 这样的实时更新工具。

__CAPGO_KEEP_0__ CAPACITOR 桥接 Web 应用与原生设备功能，确保跨平台的smooth性能。按照本指南简化您的应用开发过程！ | Ionic Release Guide

必备工具和设置

这里是如何设置开发环境并安装必要的工具。

开发工具安装

为了与 Capacitor 进行工作，您需要以下工具：

请按照以下步骤安装它们：

• Node.js 和 npm: 从 [official Node.js website](https://nodejs.org/zh/) 下载并安装 Node.js 和 __CAPGO_KEEP_0__ : 从 [Node.js 官方网站](https://nodejs.org/zh/) 下载并安装 Node.js 和 __CAPGO_KEEP_0__.
• : 从 [Node.js 官方网站](https://nodejs.org/zh/) 下载并安装 Node.js 和 Code: 选择一个编辑器，如 VS Code : 选择一个编辑器，如 WebStorm: 选择一个编辑器，如 Sublime Text : 安装最新稳定版本 : 从 [git-scm.com](https://git-scm.com/) 下载 Git
• : 从 [git-scm.com](https://git-scm.com/) 下载 Git: 平台相关工具 : 平台相关工具.
• : 平台相关工具: 安装适合你的平台的工具，如 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]. 这简化了构建、测试和部署您的应用程序的过程

开始一个新的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).

After running this command, you’ll need to adjust your project settings in the capacitor.config.json file.

Configuring capacitor.config.json

文件是你定义项目关键设置的地方。以下是一个基本配置的例子： capacitor.config.json Here’s a breakdown of the key options:

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

Setting

安装依赖项

为了完成设置，安装所需的依赖项并使用以下命令初始化您的项目：

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 In capacitor.config.json 已正确设置。完成后，根据您的应用需求自定义每个平台的设置。

平台特定设置

iOS

打开以下iOS项目：

npx cap open ios

然后，配置以下设置：

• 包标识符: 确保它与您的appId匹配。
• 开发团队: 为code签名分配适当的团队。
• 部署目标: 设置最低iOS版本。
• 设备方向: 根据需要调整.
• 隐私描述: 在 Info.plist.

安卓

打开安卓项目:

npx cap open android

然后，更新这些设置:

• 包名: 确保它与 appId 匹配.
• 权限: 在 AndroidManifest.xml.
• 屏幕方向: 在此处配置 AndroidManifest.xml.
• Target SDK: 在此处设置合适的版本 android/app/build.gradle.

Asset and Configuration Locations

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

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

构建和测试

使用之前的设置，您现在可以构建并测试您的 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

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

无需额外设置 Capgo

To simplify deployment and testing, you can integrate live update tools like Capgo. This service has already delivered over 23.5 million updates, with 95% of users receiving updates within 24 hours and an 82% global success rate [1].

Capgo

npm install @capgo/capacitor-updater
npx cap sync

Capgo

• 添加__CAPGO_KEEP_0__到您的应用
• __CAPGO_KEEP_0__提供以下优势：
• 使用内置分析工具跟踪更新成功率。
• 快速回滚更新，如果出现问题。

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 动作集成 GitHub 动作集成的实现细节