安装 Capacitor CLI：分步指南

Capacitor CLI 帮助你通过单一代码库将 Web 应用转换为原生 iOS 和 Android 应用。 以下是快速设置的方法：

前提条件: 安装 Node.js (v16+)、npm，以及一个 Web 框架（React、Vue、Angular 等）。
安装 Capacitor CLI: 运行 npm install @capacitor/cli @capacitor/core 并使用以下命令初始化项目： npx cap init.
准备平台: 添加对 iOS (npx cap add ios) 和 Android (npx cap add android) 平台的支持。
构建与同步：使用 npm run build 以及 npx cap sync 将 Web 资源传输到 Native 项目。
可选 Live Updates：使用诸如 Capgo 无需等待 App Store 审核，即可即时推送更新。

Capacitor CLI 让 App 开发与维护更简单。请按照本指南进行配置与排错。

快速构建移动 App！React + Capacitor + Tailwind + DaisyUI

Capacitor 框架文档网站

准备工作

请按照以下步骤准备好开发环境：

环境搭建 Node.js 以及 npm

Node.js

您需要 Node.js 16 或更高版本。建议使用最新的 LTS 版本。运行以下命令检查环境：

node --version
npm --version

如果需要更新，请从官网下载 Node.js（其中包含 npm）。

确认 Node.js 就绪后，请确保您的 Web 项目符合必要的 Capacitor 要求。

检查 Web 项目

您的 Web 项目应包含以下内容：

有效的 package.json：请确保其配置正确。
构建目录：这里存放你的 Web 资源（通常为 dist 或 www).
入口点：你的构建目录必须包含一个 index.html 文件。

快速了解关键 package.json 字段：

必填字段	示例值	用途
名称	“my-app”	标识项目
版本	“1.0.0”	指定应用版本
build 目录	“dist” 或 “www”	指向 Web 资源

Node.js 和 Web 项目准备好后，接下来安装各平台专用工具。

安装所需软件

Android 开发：

下载并安装最新版本的 Android Studio 中的错误日志.
配置 Android SDK，至少为 API 级别 22。
配置 ANDROID_HOME 环境变量。

iOS 开发（仅限 Mac）：

安装 Xcode 的 Mac 14 或更高版本。
安装命令行工具。
使用 Homebrew 安装 CocoaPods:
```
brew install cocoapods
```
接受 Xcode 许可协议：
```
sudo xcodebuild -license accept
```

稍后集成 Capgo 时，请确保拥有稳定的网络连接和有效的 SSL 证书。

完成这些步骤后，即可顺利开始 Capacitor 开发。接下来，安装 Capacitor CLI。

安装 Capacitor CLI

环境准备就绪，现在安装并配置 Capacitor CLI。

添加 Capacitor 包

首先使用 npm 安装 Capacitor CLI 和 Core 包：

npm install @capacitor/cli @capacitor/core

安装完成后，通过检查以下项确认配置： Capacitor CLI 版本:

npx cap --version

设置你的项目

使用以下命令在项目中初始化 Capacitor：

npx cap init

初始化过程中，系统会提示您提供以下信息：

设置	描述	示例
应用名称	在应用商店中显示的名称	“我的酷炫应用”
应用 ID	您应用的唯一标识符	“com.mycompany.myapp”
Web 目录	Web 资源的路径	“dist” 或 “www”

接下来，更新您的配置文件（capacitor.config.ts 或 capacitor.config.json）并设置相关配置：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.mycompany.myapp',
  appName: 'My Awesome App',
  webDir: 'dist',
  bundledWebRuntime: false
};

export default config;

配置 iOS 和 Android

使用以下命令添加对 iOS 和 Android 平台的支持：

npx cap add ios
npx cap add android

这将生成原生项目：

iOS：创建一个 ios 包含 Xcode 项目的文件夹。
Android：创建一个 android 用于存放 Android Studio 项目的文件夹。

修改 Web 资源后，运行以下命令进行构建和同步：

npm run build
npx cap sync

此过程会编译你的 Web 资源，并将其传输到原生项目，包括已安装的 Capacitor 插件.

打开原生项目以进一步自定义：

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

现在可以测试配置，并解决可能出现的任何问题。

修复常见问题

在设置 Capacitor CLI 时，你可能会遇到一些常见问题。以下是解决方法：

Android Gradle 问题

如果遇到 Gradle 相关问题，请尝试以下步骤：

进入 Android 目录并清除构建缓存：
```
cd android
./gradlew cleanBuildCache
```

在以下文件中更新 Gradle 版本： android/build.gradle:

buildscript {
    ext {
        gradleVersion = '8.1.0'
    }
}

将以下行添加到以下文件中： android/gradle.properties 以获得更好的性能：
```
org.gradle.jvmargs=-Xmx4608m
org.gradle.parallel=true
```

如果问题仍然存在，请重新检查您的配置或查阅其他故障排除资源。

应用显示空白屏幕

空白屏幕通常意味着配置有问题。以下是解决方法：

检查 Web 目录路径：确保 webDir 与您的构建输出匹配。

const config: CapacitorConfig = {
    webDir: 'dist', // Adjust if necessary
};

验证服务器配置：确认服务器设置正确。

server: {
    url: 'http://localhost:3000',
    cleartext: true
}

更新内容安全策略：在 HTML 中添加此 meta 标签，以确保资源正确加载。

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: *">

插件无法正常工作

如果插件未按预期工作，请执行以下步骤：

干净安装依赖项：

rm -rf node_modules
npm cache clean --force
npm install

检查 capacitor.config.ts 中的插件设置，确保配置正确：

plugins: {
    PluginName: {
        option: 'value'
    }
}

对于使用 Capgo 原生插件的用户，它会自动同步插件并在更新期间保持兼容性。

应用这些修复后，重新构建项目以验证更改：

npm run build && npx cap copy && npx cap sync

一切运行顺畅后，您可以继续使用 Capgo 探索 live update 的选项。

结合 Live Updates Capgo

Capgo Live Update Dashboard 界面

简化应用更新使用 Capgo。它让你直接向用户推送更新，跳过应用商店审核。

入门很简单。 首先，安装必要的包：

npm install @capgo/cli @capgo/capacitor-updater
npx cap sync

然后，在你的项目中初始化 Capgo：

npx @capgo/cli init

定价方案

Capgo 提供多种定价方案，以满足不同需求：

方案	月活跃用户数	带宽	存储空间	价格（年付）
个人版	1,000	50 GB	2 GB	$12/月
开发者版	10,000	500 GB	5 GB	$33/月
团队版	100,000	2,000 GB	10 GB	$83/月

对于企业用户，PAYG 方案起步价为 $249/月，包含 API 访问权限、自定义域名以及专属支持等权益。

Live Updates 配置

要启用 Live Updates，请将以下内容添加到你的 capacitor.config.ts 文件：

{
  plugins: {
    CapacitorUpdater: {
      autoUpdate: true,
      updateUrl: 'https://api.capgo.app/updates'
    }
  }
}

核心功能

Capgo 提供多项亮点功能：

安全更新 支持端到端加密
自动化部署 通过集成的 CI/CD 实现
定向更新 通过用户分配
即时回滚 配合版本控制
实时分析 用于追踪更新

部署命令

在正式发布前，先在开发环境测试更新。请使用以下命令：

部署到 staging 环境：
```
npx @capgo/cli deploy --channel staging
```

部署到生产环境：

npx @capgo/cli deploy --channel production

Capgo 确保符合 Apple 和 Android 指南，因此您的 Live Update 不会面临应用商店违规风险。这是安装后管理 Capacitor 应用的高效方式。

总结

只要具备正确的前置条件，设置 Capacitor CLI 非常简单。此设置可确保更顺畅的应用更新和高效的开发工作流。

现代工具让应用维护比以往更容易。例如，Capgo 现在提供 Live Update，取代了旧方法。它与 CLI 安装集成，使其成为开发 Capacitor 应用的开发者的绝佳选择。

本指南中介绍的 Capacitor 生态系统中了正通过新工具和功能不断改进。安装 CLI 只是构建移动应用，你将获得详尽的文档和活跃的开发者社区支持。

请务必保持 Capacitor CLI 及其依赖包为最新版本，以避免兼容性问题。

继续阅读：安装 Capacitor CLI 分步指南

如果你正在使用 安装 Capacitor CLI：分步指南 要规划 dashboard 和 API 操作，请将其连接到 API 概览关于 API Overview 中的实现细节，简介关于 Introduction 中的实现细节， API 密钥有关 API Keys 的实现细节，设备有关 Devices 的实现细节，以及 Bundle 有关 Bundles 中的实现细节。