想用一套代码构建 iOS 和 Android 应用吗? Capacitor CLI 简化了这一过程,让您使用 web 技术创建原生应用。以下是您将学到的内容:
- 快速设置:安装 Capacitor CLI 并在几分钟内初始化您的项目。
- 平台集成:使用简单的命令添加 iOS 和 Android 支持。
- 实时更新:使用 __CAPGO_KEEP_0__ Capgo 即时通过互联网进行更新。
- 常见问题: troubleshoot sync errors or build failures.
开始的关键步骤:
- 安装 Node.js, npm, JDK, Xcode, 和 Android Studio.
- 运行
npm install @capacitor/core @capacitor/cli并初始化您的项目。 - 添加 iOS 和 Android 平台
npx cap add ios和npx cap add android. - 可选:设置Capgo用于实时 应用程序更新.
本指南涵盖了设置Capacitor CLI、配置平台和部署应用程序所需的一切。让我们开始吧!
介绍 Capacitor 配置

设置要求
要开始使用,请确保已安装以下工具:
- Node.js (或更高版本) 和 npm
- Java JDK (或更高版本)
- Xcode (iOS构建需要12或更高版本)
- Android Studio (用于Android构建)
- Capacitor CLI (版本6或7)
可选: If you want to enable live updates, check out the “Capgo Setup Guide” below.
CLI Installation Steps
Before starting, ensure you have Node.js, npm, JDK, Xcode, and Android Studio set up. Once ready, you can install the Capacitor CLI by running:
npm install --save @capacitor/core @capacitor/cli
npx cap init
This command installs Capacitor and sets up its core components.
After completing this step, move on to 创建新项目 创建新项目
使用__CAPGO_KEEP_0__ __CAPGO_KEEP_1__
更新配置文件 using Capacitor CLI文件以包含以下设置:
mkdir my-app && cd my-app
npm init -y
npx cap init my-app com.company.app --web-dir dist
更新后,使用此配置文件来为项目设置__CAPGO_KEEP_0__。
更新配置文件 capacitor.config.json 编辑
{
"appId": "com.company.app",
"appName": "My App",
"webDir": "dist",
"bundledWebRuntime": false,
"server": {
"hostname": "app.example.com",
"androidScheme": "https"
}
}
Once updated, use this configuration to set up Capacitor for your project.
平台设置
现在项目骨架搭建完成,时刻准备设置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或更高版本。
一旦安装完成,您就需要将native目标与web应用程序的更改保持同步。
平台更新
同步您的平台与最新的web更改,请按照以下步骤更新您的web应用程序:
npm run build
npx cap sync
该命令处理两个任务: cap sync 将更新的 Web 资产复制到本机平台
- 更新本机配置和插件以匹配最新的更改
- IDE 配置
在适当的 IDE 中打开平台特定的项目:
在 Xcode 中:
npx cap open ios # Opens Xcode
npx cap open android # Opens Android Studio
选择您的开发团队。
- 设置签名证书。
- 更新您的包标识符。
- 在 Android Studio 中:
修改应用程序 ID
- 在 Android Studio 中:
build.gradle. - 配置签名的keystore。
- 设置debug和release两种构建变体。
当所有配置完成后,使用 npx cap build ios 或 npx cap build android再次运行 npx cap sync 确保所有资产都最新化。
Capgo Setup 指南

设置Capgo以便于您的应用程序即时进行线上更新。
Capgo的关键功能
Capgo提供了多种工具来简化应用程序更新:
- 端到端加密 确保更新的安全传递。
- 更新 在应用程序启动时 在后台
- 分析工具 帮助跟踪更新成功率和用户参与度。
- 一个 单击回滚 选项让您快速恢复从有问题的更新。
- 使用 频道系统 在__CAPGO_KEEP_0__中
安装Capgo
开始使用Capgo:
-
npm install --save @capgo/cli -
初始化Capgo 在您的项目中:
npx capgo init -
构建和发布更新:
npm run build npx capgo release -
打开应用程序以触发后台更新过程。
最佳实践
- 使用渠道测试更新之前将其发布给所有用户。
- 监控分析以确保更新成功并且用户保持活跃。
- 启用错误跟踪以及早捕获和修复问题。
- Keep the rollback feature ready to quickly address any problems.
Capgo 与 Capacitor 8 兼容,集成 CI/CD pipeline,满足 Apple 和 Google 商店要求。
Common Issues and Tips
Once you’ve completed the platform and Capgo setup, you might face some common errors. Here’s how to address them quickly.
__CAPGO_KEEP_0__ 未找到
-
CLI Not Found 执行失败。解决:重新运行并尝试。
npx capfails. 环境设置问题: Runnpm install --save @capacitor/cli @capacitor/core__CAPGO_KEEP_0__ 未找到 -
Node 版本不符 错误: CLI 命令因 Node.js 版本错误而失败。 修复: 请按照设置要求安装 Node.js 版本 14 或更高。
配置问题
-
配置不符 错误:
capacitor.config.json的修改没有生效。 修复: 确保appIdandwebDir值得您项目的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 Update 问题
__CAPGO_KEEP_0__
- Capgo 更新失败
错误: 在生产应用中,更新没有显示出来。
修复: 检查一下你的 Capgo API 在
capacitor.config.json和确保你正在针对正确的渠道。
有关平台特定设置的更多详细信息,请参阅 Platform Setup 部分。如果你正在使用实时更新,请参阅 Capgo Setup Guide 以获取更多故障排除提示。
概要
设置检查
使用 Capacitor CLI 启动你的 web 应用,设置 iOS 和 Android 平台,并可选地包含 Capgo 以支持实时更新。
Here’s how to get started:
- 使用 Capacitor CLI 来初始化您的项目。
- 设置您的应用程序的包 ID 和定义 Web 输出目录。
- 添加 iOS 和 Android 平台的支持。
- 使用以下命令安装并设置 Capgo:
npm install --save @capgo/cli && npx capgo init
有关详细设置说明或故障排除,请参阅官方 Capacitor 和 Capgo 文档。
继续阅读 Capacitor CLI: 项目设置指南
如果您正在使用 Capacitor CLI: 项目设置指南 来规划仪表板和 API 操作,连接它与 API 概览 了解 API 概览 中的实现细节。 简介 简介中的实现细节 API Keys API Keys中的实现细节 设备 简介中的实现细节 __CAPGO_KEEP_0__ 由