Installing Capacitor CLI: Step-by-Step Guide

Capacitor CLI helps you transform web apps into native iOS and Android apps with one codebase. 快速设置步骤:

前提条件: 安装 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项目中。
可选实时更新：使用工具类似 Capgo 实时更新简化了应用程序开发和维护。遵循指南进行平滑的设置和故障排除。

Capacitor CLI simplifies app development and maintenance. Follow the guide for smooth setup and troubleshooting.

__CAPGO_KEEP_0 Capacitor + CAPGO_KEEP_1__ + DaisyUI

Capacitor Framework Documentation Website

开始之前

准备环境

Node.js 和 __CAPGO_KEEP_0__ and npm

您需要 Node.js 的 16 或更高版本。推荐使用最新的 LTS 版本。要检查您的设置，请运行：

如果需要更新，请从官方网站下载 Node.js（包含 __CAPGO_KEEP_0__）。

node --version
npm --version

确认 Node.js 准备好后，请确保您的 Web 项目满足必要的 npm 要求。

Capacitor

检查您的 Web 项目

您的 Web 项目应具备以下条件：

一个有效的 package.json 文件: 确保它已正确配置。
一个构建目录: 这是您的 Web 资产存放地（通常是 dist 或 www).
一个入口点: 您的构建目录必须包含一个 index.html 文件。

快速查看关键 package.json 字段：

必填项	示例值	目的
名称	“my-app”	识别项目
版本	“1.0.0”	指定应用版本
构建目录	“dist”或“www”	指向Web资产

一旦您的Node.js和Web项目准备就绪，请转到安装平台特定工具。

安装必备软件

对于 Android 开发:

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

对于 iOS 开发 (仅限 Mac ):

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

在将 Capgo 集成到项目中时，请确保您的网络连接稳定且 SSL 证书有效。

这些步骤完成后，您就可以顺利进行 Capacitor 开发了。接下来，您将安装 Capacitor 和 CLI。

安装 Capacitor 和 CLI

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

添加 Capacitor 包

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

npm install @capacitor/cli @capacitor/core

安装完成后，请确认设置并检查 Capacitor CLI 版本:

npx cap --version

设置您的项目

使用以下命令在您的项目中初始化 Capacitor:

npx cap init

初始化期间，您将被要求提供以下详细信息：

设置	描述	示例
应用名称	应用名称在应用商店中显示	“我的超级应用”
应用ID	应用的唯一标识符	“com.mycompany.myapp”
Web Directory	Path to your web assets	“dist” or “www”

Next, update your configuration file (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;

or

）中相关设置：

npx cap add ios
npx cap add android

设置 iOS 和 Android

使用以下命令添加 iOS 和 Android 平台支持：这将生成原生项目： 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
```

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

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
团队	100,000	2,000 GB	10 GB	每月$83

针对企业用户，按需计费计划从每月$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 store 违规的风险。它是一个高效的方式来管理 Capacitor 应用程序。

结论

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

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

The Capacitor 生态系统不断地通过新工具和功能而改进。安装 CLI 只是构建移动应用程序的起点，您还将受益于详细的文档和活跃的开发者社区。请确保保持 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ 和其包的最新状态，以避免兼容性问题。继续阅读：从 Installing __CAPGO_KEEP_0__ __CAPGO_KEEP_1__: Step-by-Step 指南

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

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

如果您正在使用 Installing Capacitor CLI: Step-by-Step Guide 为了计划仪表板和API操作，连接它 API 简介为 API 概述提供实现细节简介为《Capacitor CLI 安装指南》中的介绍部分提供实现细节。 API 键为 API Keys 的实现细节设备为设备中的实现细节软件包为 Bundle 的实现细节。