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

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

开始的关键步骤：

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

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

5 步创建本机应用 CAPACITOR | 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: 反向域名标识符 (e.g., com.example.app).
• appDisplayName: 应用程序的显示名称 (e.g., My Capacitor App).

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

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"
  }
}

设置

安装依赖项

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

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

然后配置以下设置：

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

Android

打开 Android 项目使用:

npx cap open android

然后更新这些设置:

• 包名: 确保它与您的 appId 匹配。
• 权限: 在此定义必要的权限。 AndroidManifest.xml.
• 屏幕方向: 在此处配置 AndroidManifest.xml.
• Target 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].

以下是关键阶段的分解：