Capacitor CLI: __CAPGO_KEEP_2_

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 资产转移到本机项目中。
Optional Live Updates: 使用类似于 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 项目应该具有以下内容：

__CAPGO_KEEP_0__: 确保它的配置正确。
__CAPGO_KEEP_1__: 这是您的 Web 资产所在的目录 (通常 dist 或 www).
入口点: 您的构建目录必须包含一个 index.html 文件。

以下是快速查看的关键 package.json 字段:

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

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

安装必需软件

对于 Android 开发：

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

仅限 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

设置您的项目

Initialize Capacitor 在您的项目中使用以下命令：

npx cap init

在初始化过程中，您将被要求提供以下详细信息：

设置	描述	示例
应用名称	应用商店中显示的应用名称	”My Awesome App”
应用 ID	应用的唯一标识符	”com.mycompany.myapp”
Web 目录	Path to your web assets	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平台支持：

这将生成原生项目：

npx cap add ios
npx cap add android

iOS：

创建一个包含Xcode项目的文件夹.Android： ios 创建一个包含Android Studio项目的文件夹.
iOS：创建一个包含Xcode项目的文件夹.：创建 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 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的实时更新选项。

实时更新 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/month

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

Live Updates配置

要启用实时更新，请在文件中添加以下内容： 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 遵守苹果和安卓的指南，确保您的实时更新不会违反应用商店的规定。它是管理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 Guide

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

Installing Capacitor CLI: Step-by-Step Guide

继续阅读 Installing __CAPGO_KEEP_0__ __CAPGO_KEEP_1__: Step-by-Step Guide Installing Capacitor CLI: Step-by-Step Guide 为了计划仪表板和API操作，连接它与 API概述关于API概述的实现细节，介绍关于介绍的实现细节， API密钥关于API密钥的实现细节，设备关于设备的实现细节，捆绑包关于捆绑包的实现细节。

安装Capacitor CLI:一步步指南