安装 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 项目。
可选的实时更新: 使用工具如 Capgo 来即刻推送更新，避免 app store 延迟。

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”或“www”	指向web资产

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

安装必备软件

对于Android开发：

下载并安装最新版本的 安卓Studio.
设置Android SDK，至少需要API level 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 包

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

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设置 iOS 和 Android

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 项目。

npm run build
npx cap sync

修改您的 Web 资产后，请运行以下命令来构建和同步： Capacitor 插件.

__CAPGO_KEEP_0__

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

插件（Capgo Solutions）

解决常见问题

在设置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的原生插件,它自动同步插件并在更新期间维护兼容性。

修复这些问题后，请重建您的项目以验证更改：

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

一旦一切顺利，您可以继续探索live update的选项并使用Capgo。

Live Updates with Capgo

Capgo Live Update控制台界面

简化应用更新使用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

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

Live 更新配置

要启用实时更新，请将以下内容添加到您的 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 是构建移动应用程序的起点部署命令，并且您将从详细的文档和活跃的开发者社区中受益。

请确保保留并及时更新Capacitor和CLI及其包，以避免兼容性问题。

继续阅读《安装CapacitorCLI：逐步指南》

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

安装Capacitor CLI：一步步指南