Capacitor CLI: 项目设置指南

想用一套代码开发 iOS 和 Android 应用吗? Capacitor 使用 CLI 可以简化过程，让您使用 web 技术创建原生应用。以下是您将要学习的内容：

快速设置: 安装 Capacitor 和 CLI，仅需几分钟即可初始化您的项目。
平台集成: 使用简单的命令添加 iOS 和 Android 支持。
实时更新: 使用 __CAPGO_KEEP_0__ 实现即时的无线更新。 Capgo 使用 __CAPGO_KEEP_0__ 实现即时的无线更新。
使用 __CAPGO_KEEP_0__ 实现即时的无线更新。: 解决同步错误或构建失败等问题。

开始的关键步骤:

安装 Node.js, npm, JDK Xcode, 和 Android Studio.
运行 npm install @capacitor/core @capacitor/cli 并初始化您的项目。
使用 npx cap add ios 添加 iOS 和 Android 平台 npx cap add android.
Optional: 为Capgo设置实时 app更新.

This guide will cover everything you need to set up Capacitor CLI, configure platforms, and deploy your app. Let’s dive in!

介绍 Capacitor context:实时更新产品页面. 角色: 部分或页面标题. 见于: 页面 live-update.astro. 保留 Capgo 产品/品牌和开发人员术语完全不变.

Capacitor Framework Documentation Website

YouTube视频播放器

设置要求

要开始使用，请确保您已安装以下工具: Node.js（版本14或更高）和 npm
Java JDK （版本 11 或更新）
Xcode （版本 12 或更新，用于 iOS 构建）
Android Studio （用于 Android 构建）
Capacitor CLI （版本 6 或 7）

可选： 如果您想启用实时更新，请参阅“Capgo 设置指南”下面。

CLI 安装步骤

在开始之前，请确保您已安装 Node.js, npm, JDK, Xcode,并且 Android Studio 已设置好。准备好后，您可以通过以下命令安装 Capacitor CLI:

npm install --save @capacitor/core @capacitor/cli
npx cap init

此命令安装 Capacitor 并设置其核心组件。

完成此步骤后，请继续 创建新项目 来为您的应用程序生成一个基本框架。

创建新项目

开始使用您的项目使用 Capacitor CLI请按照以下步骤进行。

mkdir my-app && cd my-app
npm init -y
npx cap init my-app com.company.app --web-dir dist

更新配置文件

编辑 capacitor.config.json 文件以包含以下设置:

{
  "appId": "com.company.app",
  "appName": "My App",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "server": {
    "hostname": "app.example.com",
    "androidScheme": "https"
  }
}

更新后，请使用此配置为您的项目设置 Capacitor。

平台设置

现在项目骨架已经完成，是时候设置iOS和Android目标了。

添加 iOS 和 Android

首先使用 Capacitor CLI 安装必要的平台特定包:

npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android

对于 iOS，确保您有 Xcode 14 或更高版本， CocoaPods 1.11 或更高版本，以及 macOS 12 或更高版本。对于 Android，您需要 Android Studio Giraffe (2022.3.1+)，JDK 17 或更高版本，以及 Gradle 7.5 或更高版本。

一旦安装完成，您就需要将本机目标与您的 Web 应用程序的更改保持同步。

平台更新

同步您的平台与最新的 Web 更改，请按照以下步骤更新您的 Web 应用程序后:

npm run build
npx cap sync

该 cap sync 命令处理两个任务：

将更新的 Web 资产复制到本机平台
更新本机配置和插件以匹配最新的更改

IDE 配置

打开适当的 IDE 中的平台特定项目:

npx cap open ios     # Opens Xcode
npx cap open android # Opens Android Studio

在 Xcode 中:

选择您的开发团队。
设置签名证书。
更新您的包标识符。

在 Android Studio 中:

修改应用程序 ID 在 build.gradle.
配置用于签名的 keystore。
设置调试和发布构建变体。

当所有配置完成后，使用 npx cap build ios 或 npx cap build androidCapacitor npx cap sync Capacitor

Capgo Capacitor

Capgo Live Update Dashboard Interface

Set up Capgo to enable instant over-the-air updates for your app.

Key Features of Capgo

Capgo offers several tools to streamline app updates:

Capacitor Capacitor Live Update Dashboard Interface
更新运行 在后台 当应用程序启动时
分析工具 帮助跟踪更新成功率和用户参与度
一个回滚一个
单击 让您快速恢复从有问题的更新 使用

Installing Capgo

开始使用Capgo：

安装Capgo CLI:
```
npm install --save @capgo/cli
```
初始化Capgo 在您的项目中：
```
npx capgo init
```
构建和发布更新：
```
npm run build
npx capgo release
```
打开应用程序以触发后台更新过程。

最佳实践

使用频道测试更新之前将其推送给所有用户。
监控分析以确保更新成功并且用户保持活跃。
启用错误跟踪以及早捕获和修复问题。
保持回滚功能以快速解决任何问题。

Capgo兼容Capacitor 8，集成CI/CD管道，符合苹果和谷歌商店要求。

常见问题和建议

完成平台和Capgo设置后，你可能会遇到一些常见错误。以下是快速解决它们的方法。

环境设置问题

CLI未找到 错误: 命令 npx cap 执行失败。 解决方法: 运行 npm install --save @capacitor/cli @capacitor/core 并尝试再次执行。
Node版本不符 错误: CLI 命令因 Node.js 版本错误而失败。修复: 安装 Node.js 版本 14 或更高版本，详见设置要求。

配置问题

配置不符 错误: 修改不生效。 capacitor.config.json 修复 : 确保 和 appId 的值与您的项目一致。 webDir 值 package.json 和 Web 构建输出文件夹。
平台同步错误 错误: 运行 npx cap sync 结果导致插件版本冲突。修复: 更新 @capacitor/android 并 @capacitor/ios 将其更新到同一主版本号，然后重新运行同步命令。

构建和部署

构建签名失败 错误: iOS 或 Android 构建失败，原因是缺少证书或密钥库。修复: 请遵循 IDE 配置指南。对于 iOS，需要在 Xcode 中添加开发团队。对于 Android，需要在 build.gradle.
Web 目录未找到 错误: npx cap sync 无法找到 Web 资产。修复: 在同步平台之前，请运行您的 Web 构建命令（例如 npm run buildLive 更新问题

__CAPGO_KEEP_0__ 更新失败

Capgo Update Failures Live Update Issues问题：更新没有出现在生产应用中。修复问题：检查一下你的 Capgo API key 和确保你正在使用正确的渠道。 capacitor.config.json 关于平台特定设置的更多详细信息，请参阅平台设置部分。如果你正在使用实时更新，请参阅

For more details on platform-specific setup, revisit the Platform Setup section. If you’re working with live updates, consult the Capgo Setup Guide for additional troubleshooting tips.

设置检查

使用

Start your web app with Capacitor CLI, set up iOS and Android platforms, and optionally include Capgo for live updates.

开始步骤如下：

Use the Capacitor CLI to initialize your project.
设置您的应用程序的包 ID 和定义 Web 输出目录。
添加 iOS 和 Android 平台的支持。
使用以下命令安装并设置 Capgo: npm install --save @capgo/cli && npx capgo init

有关详细设置说明或故障排除，请参阅官方 Capacitor 和 Capgo 文档。

从 Capacitor CLI: 项目设置指南继续。

如果您正在使用 Capacitor CLI: 项目设置指南 来规划仪表板和 API 操作，连接它与 API 概述查看 API 概述中的实现细节介绍查看介绍中的实现细节 API 键为 API 键的实现细节设备为设备的实现细节包为包的实现细节

Capacitor CLI:项目设置指南