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 和 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

文件是你定义项目关键设置的地方。以下是一个基本配置的例子： 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

添加平台后，同步您的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.

资源和配置位置

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

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

构建和测试

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

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].

To add Capgo to your app:

npm install @capgo/capacitor-updater
npx cap sync

您可以将实时更新工具集成到应用中：Capgo。该服务已成功推送超过2,350万次更新，95%的用户在24小时内接收到更新，全球成功率达82%

• 将__CAPGO_KEEP_0__添加到您的应用中：
• __CAPGO_KEEP_0__在测试期间提供了以下好处：
• 使用内置分析工具跟踪更新成功率。
• 快速回滚更新，如果出现问题。

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

概要

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

主要内容

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

__CAPGO_KEEP_0__ 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 动作集成