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: 从官方下载并安装两者 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]. 这样可以简化应用程序构建、测试和部署的过程

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

The capacitor.config.json file is where you define the key settings for your project. Below is an example of a basic configuration:

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

Here’s a breakdown of the key options:

安装依赖项

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

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

添加平台后，同步您的webcode：

npx cap sync

在运行这些命令之前，请确保您的web应用程序已构建，并且 webDir 在 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 和 Configuration Locations

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

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

构建和测试

使用之前概述的设置，您现在可以构建并测试您的 Capacitor 应用 上下文：Capgo 解决方案营销页面。角色：短 UI 标签或导航项。见于：页面解决方案/白标签.astro。保留 Capgo 产品/品牌和开发人员术语完全不变。消息键 `solutions_white_label_visual_cell1_value` (解决方案白标签视觉单元1值)。

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

构建和运行命令

npm run build
npx cap sync

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

接下来，使用适合您的目标平台的命令：

npx cap run ios

对于 iOS：

npx cap run android

对于 Android：

Adding Capacitor Plugins

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

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

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

无需额外设置 Capgo

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

要将Capgo添加到您的应用中：

npm install @capgo/capacitor-updater
npx cap sync

Capgo在测试期间提供了几个好处：

• 创建开发、测试和生产环境的独立通道
• 在测试期间推送即时修复
• 使用内置分析工具跟踪更新成功率。
• 快速回滚更新以解决问题。

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

概要

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

主要内容

创建Capacitor应用程序需要对设置、配置和平台特定调整进行细致的关注。设置开发环境，包括工具如 Node.js 和__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Capacitor CLI 使用更新系统，如

__CAPGO_KEEP_0__ Capgo 可以简化发布管理并帮助维持应用稳定 [1].

以下是关键阶段的分解

继续阅读Capacitor应用初始化：逐步指南

如果您正在使用 Capacitor应用初始化：逐步指南 __CAPGO_KEEP_0__应用初始化：逐步指南 与Capgo CI/CD 为Capgo CI/CD产品工作流 Capgo 原生构建 为产品工作流程在 Capgo 原生构建中 Capgo 集成 为产品工作流程在 Capgo 集成中 CI/CD 集成 为实现细节在 CI/CD 集成中 GitHub 动作集成 为实现细节在 GitHub 动作集成中