Capacitor 移动应用初始化指南

想用单一代码库构建移动应用吗？ Capacitor 让我们创建 iOS、Android 和 web 应用，使用框架如 React, Angular, 或 Vue. 本指南将解释如何设置、配置平台和高效部署更新。 Capacitor开始之前的关键步骤：

live_update_platform_capacitor_title

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

Capacitor 将网页应用与本机设备功能连接起来，确保跨平台的平滑性能。请遵循本指南简化您的应用开发过程！

5 步创建本机应用 CAPACITOR | ionic 发布指南

所需工具和设置

这里是如何设置您的开发环境以及必要的工具。

开发工具安装

要与 Capacitor 进行工作，您需要以下工具：

按照以下步骤安装它们:

• Node.js 和 npm: 从官方 Node.js 网站.
• Code 编辑器: 选择一个编辑器，如 VS Code WebStorm, 或 Sublime Text 并安装最新稳定版本。
• Git: 从 git-scm.com.
• 平台相关工具: 安装适合你的平台的工具，如 Xcode 适用于 macOS 或 安卓 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).

运行此命令后，您需要调整项目设置中的 capacitor.config.json 文件。

配置capacitor.config.json文件

The capacitor.config.json file

{
  "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.
• 目标 SDK: 设置合适的版本在 android/app/build.gradle.

资源和配置位置

在这里你会找到app图标、启动屏幕、深度链接和权限的关键文件:

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

构建和测试

使用之前概述的设置，您现在可以构建并测试您的 Capacitor 应用 确保其在各种设备上正常工作。

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

构建和运行命令

npm run build
npx cap sync

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

对于 iOS：

npx cap run ios

对于 Android:

npx cap run android

These commands will build and launch your app on either a simulator or a connected device. Testing on both real devices and simulators is crucial to identify any platform-specific issues.

添加Capacitor插件

Capacitor插件 让您在应用程序中添加原生功能。例如，为了包含相机、地理位置和存储功能，请运行：

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

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

实时更新 Capgo

live update Capgo 仪表板界面 [1].

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

npm install @capgo/capacitor-updater
npx cap sync

Capgo 提供了多种测试的好处:

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

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

概要

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

主要内容

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

使用一个更新系统，如 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 动作集成中