Capacitor CLI: 项目设置指南

想用一个代码库构建 iOS 和 Android 应用程序吗？ Capacitor CLI 简化了这个过程，让您使用 web 技术创建原生应用。以下是您将要学习的内容：

快速设置: 安装 Capacitor CLI 并在几分钟内初始化您的项目。
平台集成: 使用简单命令添加 iOS 和 Android 支持。
实时更新: 使用 Capgo 立即获取即时的无线更新。
常见修复: troubleshoot

开始步骤:

安装 Node.js, npm JDK, Xcode 安卓Studio.
运行 npm install @capacitor/core @capacitor/cli Optional: 设置 __CAPGO_KEEP_0__ 为实时
应用更新 npx cap add ios and npx cap add android.
Optional: 设置 Capgo 以支持实时 __CAPGO_KEEP_0__.

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

Introducing Capacitor Configure

Capacitor 框架文档网站

设置要求

开始之前，请确保您已安装以下工具:

Node.js (版本 14 或更高) 和 npm
Java JDK (版本 11 或更高)
Xcode (版本 12 或更高用于 iOS 构建)
安卓 studio (用于 Android 构建)
Capacitor CLI (版本 6 或 7)

Optional: 如果您想启用实时更新，请参阅“Capgo 设置指南””。

CLI 安装步骤

开始之前，请确保您有 Node.js, npm, JDK, Xcode, 和 安卓 studio 设置完成后，您可以通过运行以下命令安装 Capacitor CLI:

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

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

完成此步骤后，请转到 创建新项目 来为您的应用程序创建基本结构。

创建新项目

要使用 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ 开始您的项目，请遵循以下步骤：使用 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 上使用 Capgo，确保您已经安装了 Xcode 14 或更高版本。 Xcode CocoaPods Gradle 1.11

安装完成后，您需要将本机目标与您的 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 中：
更新您的捆绑包标识符。

在 Android Studio 中：

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

配置完成后，使用 npx cap build ios 或 npx cap build android。 npx cap sync 重新运行

Capgo __CAPGO_KEEP_0__

Capgo Live Update 控制台界面

设置 Capgo 以便于您的应用程序即时接收来自云端的更新。

Capgo 的关键功能

Capgo 提供了多种工具来简化应用程序更新:

端到端加密 确保更新的安全传递。
更新在 应用程序启动时 在后台运行。
分析工具 帮助跟踪更新成功率和用户参与度。
一个 点击回滚 让您快速恢复从有问题的更新。
使用 频道系统 进行分阶段发布和测试。

安装 Capgo

以下是使用 Capgo 的步骤:

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

最佳实践

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

Capgo 与 Capacitor 8 兼容，集成 CI/CD pipeline，遵守 Apple 和 Google 商店要求。

常见问题和提示

完成平台和 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 build) 之前同步平台。

Live Update 问题

Capgo 更新失败 错误: 在生产应用中，更新没有出现。修复: 确认您的 Capgo API 密钥在 capacitor.config.json 并确保您正在目标正确的频道。

有关平台特定设置的更多详细信息，请参阅 Platform Setup 部分。如果您正在使用实时更新，请参阅 Capgo 设置指南以获取更多故障排除提示。

概要

设置回顾

使用 Capacitor CLI 开始您的 web 应用，设置 iOS 和 Android 平台，并可选地包含 Capgo 进行实时更新。

以下是如何开始的:

使用 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 概述的实现细节简介关于简介的实现细节 API 密钥关于 API 密钥的实现细节设备关于设备的实现细节包关于包的实现细节