Capacitor 移动应用初始化指南

想用单一的代码库构建移动应用吗? Capacitor 使创建 iOS、Android 和 web 应用变得容易，使用框架如 目标语言:Simplified Chinese, protectedTokensReact 或Vue Capacitor__CAPGO_KEEP_0__

, 配置平台，并高效地部署更新。

• 开始的关键步骤:: 安装工具, npm, Git, and a code editor like , Code, Git, 和一个 __CAPGO_KEEP_1__ 编辑器，如.
• 设置Capacitor: 安装Capacitor CLI并初始化您的项目。
• 配置平台: 添加iOS和Android支持，调整设置，并同步您的code。
• 测试和部署: 在设备上构建，运行，并使用像__CAPGO_KEEP_0__这样的实时更新工具进行无缝更新。 Capgo __CAPGO_KEEP_0__

Capacitor

5步创建原生应用 使用CAPACITOR | Ionic发布指南

必备工具和设置

以下是设置开发环境所需的基本工具。

开发工具安装

为了使用 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]. 这样可以简化应用程序的构建、测试和部署过程。

Starting a New Capacitor Project

Once you’ve installed the necessary tools, you’re ready to set up your first Capacitor project. Here’s how to get started.

创建项目

To create a new Capacitor project, open your terminal and use this command:

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: __CAPGO_KEEP_0__反向域名标识符（例如， 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"
  }
}

设置

Installing Dependencies

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

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.

Android

打开 Android 项目时使用:

npx cap open android

然后更新这些设置:

• 包名: 确保它与您的 appId 匹配。
• 权限: 在这里定义必要的权限。 AndroidManifest.xml.
• 屏幕方向: 在这里配置 AndroidManifest.xml.
• 目标 SDK: 设置合适的版本号 android/app/build.gradle.

资源和配置位置

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

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

构建和测试

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

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

将 Capgo 添加到您的应用中：

npm install @capgo/capacitor-updater
npx cap sync

Capgo 在测试期间提供了以下优势：

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

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

概要

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

主要内容

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

使用像__CAPGO_KEEP_0__这样的更新系统 使用Capgo 可以简化发布管理并帮助维持应用稳定性 [1].

以下是关键阶段的分解：