Capacitor 移动应用初始化指南

想用单一代码库构建移动应用吗？ Capacitor 使您能够使用框架如 React, Angular,或 Vue轻松创建 iOS、Android 和 web 应用。这份指南将解释如何设置 Capacitor,配置平台，并高效地部署更新。

开始步骤:

• 安装工具: Node.js, npm, Git, and a code editor like VS Code.
• VS Capacitor: Install the Capacitor CLI and initialize your project.
• : 安装 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ 并初始化您的项目。: Add iOS and Android support, adjust settings, and sync your code.
• : 添加 iOS 和 Android 支持、调整设置并同步您的 __CAPGO_KEEP_0__。测试和部署 Capgo for seamless updates.

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

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

所需工具和设置

以下是如何设置开发环境以及必需工具的说明。

开发工具安装

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

按照以下步骤安装它们:

• Node.js 和 npm: 从官方 Node.js 网站.
• Code Editor: Pick an editor like VS Code, : 选择一个编辑器，如 VS __CAPGO_KEEP_0__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]

For example:

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 匹配。
• 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 提供了多项测试期间的好处:

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

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

概要

本指南已逐步介绍了如何设置和部署Capacitor应用，涵盖了所有必需的步骤，以便启动并确保平稳运行。

主要内容

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

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

以下是关键阶段的分解:

从 Capacitor 应用程序初始化：逐步指南继续

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