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

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

快速构建移动应用！React + Capacitor + Tailwind + DaisyUI

Capacitor 框架文档网站

开始之前

__CAPGO_KEEP_0__ 环境准备

设置 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

确认设置 Capacitor CLI 版本:

npx cap --version

设置您的项目

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

npx cap init

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

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

这将生成原生项目：

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__ 时，您可能会遇到几个常见问题。以下是解决方法：

如果您遇到Gradle相关问题，请尝试以下步骤：

导航到Android目录并清除构建缓存：
```
cd android
./gradlew cleanBuildCache
```

在 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
}

更新内容安全策略: 为资源加载添加此 meta 标签。

<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/月

针对企业用户，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__ 和其包的最新状态，以避免兼容性问题。由

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

安装Capacitor CLI:一步步指南