安装 Capacitor CLI: 步骤指南

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

前提条件: 安装 Node.js (v16+), npm, and a web framework (React, Vue, Angular, etc.).
Install 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 实时更新工具__CAPGO_KEEP_1__简化了应用程序开发和维护。遵循指南进行平滑的设置和故障排除。

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

__CAPGO_KEEP_0 Capacitor + CAPGO_KEEP_0 CAPGO_KEEP_1__简化了应用程序开发和维护。遵循指南进行平滑的设置和故障排除。 + DaisyUI

Capacitor

开始之前

准备环境

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 字段：

Required Field	Example Value	目的
name	“my-app”	识别项目
version	“1.0.0”	Specifies app version
build directory	“dist” or “www”	指向 web 资产

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

安装必备软件

对于 Android 开发:

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

对于 iOS 开发 (仅限 Mac ):

安装 Xcode 14 或更高版本。
安装 Command Line Tools。
使用使用 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

npx cap add ios
npx cap add android

使用以下命令添加 iOS 和 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
}

更新内容安全策略: 为正确加载资源添加此 meta 标签到您的 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's 原生插件的人来说，它自动同步插件并在更新期间维护兼容性。

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

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 Live Update Dashboard Interface

应用程序更新使用实时更新 using Capgo. It lets you push updates directly to users, skipping the need for app store reviews.

首先，安装必要的包： 然后，在您的项目中初始化实时更新：

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

Then, initialize Capgo in your project:

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 提供了以下几个突出的功能:

安全更新 with end-to-end encryption
Automated deployments through integrated CI/CD
Targeted updates via user assignment
Instant rollback with version control
实时分析 to track updates

部署命令

在开发环境中测试更新之前将其部署到生产环境。使用以下命令:

将应用程序部署到测试环境:
```
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 应用程序。

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

Installing Capacitor CLI: Step-by-Step Guide

__CAPGO_KEEP_0__ Capacitor + __CAPGO_KEEP_0__ __CAPGO_KEEP_1__简化了应用程序开发和维护。遵循指南进行平滑的设置和故障排除。 + DaisyUI