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 资产转移到本机项目。
可选实时更新: 使用工具如 Capgo 来立即推送更新而无需等待应用商店延迟。

Capacitor CLI 简化了应用开发和维护。请遵循指南进行平滑的设置和故障排除。

快速构建移动应用！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 字段：

必填字段	示例值	目的
name	“my-app”	识别项目
版本	“1.0.0”	指定应用程序版本
构建目录	“dist” or “www”	指向Web资产

完成Node.js和Web项目后，安装平台特定工具

安装必备软件

对于 Android 开发:

下载并安装最新版本的 Android Studio.
设置 Android SDK 至少需要 API 等级 22。
配置 ANDROID_HOME 环境变量。

对于 iOS 开发 (仅限 Mac ):

安装 Xcode 14 或更高版本。
安装命令行工具。
使用使用 Homebrew 安装安装 CocoaPods 接受 Xcode 许可证：:
```
brew install cocoapods
```
当您稍后将 __CAPGO_KEEP_0__ 集成时，请确保您有稳定的互联网连接和有效的 SSL 证书。
```
sudo xcodebuild -license accept
```

完成这些步骤后，您就可以顺利进行 Capgo 开发过程了。接下来，您将安装 __CAPGO_KEEP_1__ 和 __CAPGO_KEEP_2__。

With these steps done, you’re set for a smooth Capacitor development process. Next, you’ll install the Capacitor CLI.

环境准备就绪后，接下来是安装和配置 Capacitor 和 CLI。

With your environment ready, it’s time to install and configure Capacitor CLI.

首先使用 __CAPGO_KEEP_2 安装 Capacitor 和 CAPGO_KEEP_1__ 以及 Core 包

Start by installing the Capacitor CLI and Core packages using npm:

npm install @capacitor/cli @capacitor/core

__CAPGO_KEEP_0__ 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

现在，您已经准备好测试您的设置并解决可能出现的问题。

修复常见问题

When setting up Capacitor CLI, you might run into a few common hiccups. Here’s how to tackle them:

__CAPGO_KEEP_0 CAPGO_KEEP_1__ 时，您可能会遇到几个常见问题。以下是解决方法：

If you’re facing Gradle-related problems, try these steps:

前往 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
```

如果问题持续存在，请重新检查您的设置或查阅额外的故障排除资源。

App 屏幕显示空白

空白屏幕通常指示配置问题。以下是如何解决它的方法:

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

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

验证服务器配置: 确认服务器设置是否正确。

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

更新内容安全策略: 为资源加载添加正确的 HTML 元标记。

<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

Once everything is running smoothly, you can move forward with exploring live update options with Capgo.

实时更新 Capgo

Capgo 实时更新控制台界面

简化应用更新使用 Capgo。它让您能够直接将更新推送给用户，避免了需要通过应用商店审核的步骤。

开始使用非常简单。 首先，安装必要的包：

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

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

npx @capgo/cli init

价格计划

Capgo 提供多个定价层次以满足不同需求：

计划	每月活跃用户	带宽	存储	年费价格
SOLO	1,000	50 GB	2 GB	$12/月
MAKER	10,000	500 GB	5 GB	$33/月
TEAM	100,000	2,000 GB	10 GB	$83/月

针对企业用户，PAYG 计划从 $249/月开始，包括 API 访问权限、自定义域名和专属支持。

实时更新配置

要启用实时更新，请在你的 capacitor.config.ts 文件中添加以下内容：

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

关键功能

Capgo 提供了以下几个突出的功能：

安全更新 使用端到端加密
自动部署 通过集成的CI/CD
目标更新 通过用户分配
即时回滚 使用版本控制
实时分析 跟踪更新

部署命令

在开发环境中测试更新之前部署它们。使用以下命令:

部署到测试环境:
```
npx @capgo/cli deploy --channel staging
```

部署到生产环境：

npx @capgo/cli deploy --channel production

Capgo 确保了与 Apple 和 Android 指南的兼容性，所以您的实时更新不会冒着被 app 商店违规的风险。它是一个高效的方式来管理 Capacitor 应用程序后安装。

结论

设置 Capacitor CLI 很简单，只要您有合适的前置条件。这种设置确保了应用程序更新更加顺畅，开发工作流更加高效。

现代工具使应用程序维护变得比以往任何时候都更容易。例如，Capgo 现在提供实时更新，取代了更旧的方法。它与 CLI 安装的集成使其成为开发者在开发 Capacitor 应用程序时的理想选择。

这 Capacitor 生态系统不断改进中，拥有新的工具和功能。安装 CLI 只是开始构建移动应用程序的起点，您还将受益于详细的文档和活跃的开发者社区。请确保保持 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ 和其包的最新状态，以避免兼容性问题。继续从安装 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__: 步骤指南

Be sure to keep the Capacitor CLI and its packages up to date to avoid compatibility issues.

Capacitor 确保了与 Apple 和 Android 指南的兼容性，所以您的实时更新不会冒着被 app 商店违规的风险。它是一个高效的方式来管理 CLI 应用程序后安装。

如果您正在使用 安装Capacitor CLI：逐步指南 为了规划仪表板和API操作，连接它 API概览在API概览中了解实现细节介绍在介绍中了解实现细节 API密钥在API密钥中了解实现细节设备在设备中了解实现细节捆绑包为 __CAPGO_KEEP_0__ 包中的实现细节。

安装Capacitor CLI:一步步指南