Setting Up Capacitor Local Environment

想使用 web 技术构建 iOS 和 Android 应用？以下是快速高效地设置本地环境的方法。 Capacitor 环境

关键步骤：

1. 安装必备软件:

   • Node.js (v20.0.0+) npm (v9.0.0+) Git (v2.40.0+),以及一个现代 IDE（例如 VS Code).
   • 系统需求：8GB RAM、256GB 存储、Intel i5/AMD Ryzen 5 处理器。

2. iOS 设置 （macOS only）

   • macOS 13.0+ (Ventura) Xcode 16.0+, CocoaPods 1.12.0+，并且需要一个有效的 Apple 开发者账户。

3. Android 设置:

   • 安卓Studio Hedgehog (2023.1.1)+，Android SDK API level 23+，JDK 17，和 Gradle 8.0+.
   • 为 Android 工具设置环境变量。

4. 安装 Capacitor:

   npm install @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android

5. 初始化一个项目:

   • 使用 Capacitor 创建一个新项目或将其集成到现有应用中 npx cap init.

6. 添加平台:

   npx cap add ios
   npx cap add android

7. 构建和同步:

   • 构建 Web 资产（npm run build）并将其与本机平台同步（npx cap sync).

8. 启用实时更新:

   • 使用 Capgo 实时更新

     npx @capgo/cli init

9. 测试您的应用:

   • 使用 iOS 模拟器 (npx cap open ios) 或 Android 模拟器 (npx cap open android).

快速提示：

更新 capacitor.config.ts 用于管理环境和启用实时更新。例如：

const config: CapacitorConfig = {
  server: {
    url: process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : 'https://production-url.com',
    cleartext: true
  }
};

此设置确保您的 Capacitor 应用程序的开发、测试和部署顺畅。

Ionic Capacitor - 创建新应用 - 在 Android 和 iOS 上运行…

必备设置

确保您的系统满足必要的规范之前继续。

基本软件需求

安装以下工具:

您的机器至少应具备 8GB RAM, 256GB 存储，以及 Intel i5/AMD Ryzen 5（或等效）处理器.

iOS 和 Android 设置

iOS 要求 （macOS only）：

• macOS Ventura 13.0 或更高
• xcode 16.0 或更高 (从 Mac App Store 下载)
• CocoaPods 1.12.0 或更高 (使用 sudo gem install cocoapods)
• 一个有效的 Apple 开发者账户

安卓环境要求 （Windows/MacOS/Linux）：

• Android Studio Hedgehog (2023.1.1) 或更高
• Android SDK API 23 或更高 (Android 6.0 或更高)
• Java 开发工具包 (JDK) 17
• Gradle 8.0+

通过添加以下行来设置 Android 环境变量：

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

安装 Capacitor

使用 npm 安装 Capacitor:

npm install @capacitor/core @capacitor/cli
npm install @capacitor/ios @capacitor/android

如果您正在使用 Vue、React 或 Angular 等框架，安装相应的 Capacitor 插件。对于 Vue，运行:

npm install @capacitor/vue

要确认安装，请检查 Capacitor 版本的运行结果:

npx cap --version

您应该看到当前 Capacitor 版本的显示（例如，截至 2025 年 4 月的 5.x.x）。

最后，在项目目录中初始化 Capacitor:

npx cap init

完成后，您可以为您的项目配置这些组件。

设置说明

项目设置

开始前，创建一个新的 __CAPGO_KEEP_0__ 项目 或将 Capacitor 整合到现有的 Web 应用： Capacitor

npm init @capacitor/app
cd my-cap-app
npm install

如果您正在将 Capacitor 添加到现有的 Web 应用中，请在项目目录中初始化它:

cd your-web-app
npm install @capacitor/core @capacitor/cli
npx cap init [appName] [appId]

初始化后，您需要为原生开发添加必要的平台。

平台设置

将 iOS 和 Android 平台添加到您的项目中:

npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android

更新您的 capacitor.config.ts 文件以包含所需的配置:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
    appId: 'com.example.app',
    appName: 'My Capacitor App',
    webDir: 'dist',
    bundledWebRuntime: false,
    plugins: {
      // Add plugin settings here
    }
};

export default config;

构建过程

1. 通过运行以下命令构建您的 Web 资产: 同步您的项目与原生平台

npm run build

2. 同步后，请确保配置您的环境和 __CAPGO_KEEP_0__ 设置。:

npx cap sync

确保环境和live update设置已正确配置后，同步。

环境设置

环境管理，更新您的 capacitor.config.ts 文件：

const config: CapacitorConfig = {
    server: {
      url: process.env.NODE_ENV === 'development'
        ? 'http://localhost:3000'
        : 'https://production-url.com',
      cleartext: true
    }
};

启用实时更新 Capgo 为更平滑的更新交付:

npx @capgo/cli init

测试环境

设置测试环境使用以下命令：

用于在物理设备上测试:

• 确保 iOS 设备已在您的 Apple Developer 帐户中注册。
• 在 Android 设备上启用 USB 调试。
• 验证开发证书已正确设置。

“我们实践敏捷开发，@Capgo 在持续交付给我们的用户方面至关重要！” – Rodrigo Mantica [1]

Capgo 的频道系统是 beta 测试和分阶段发布的 tuyệt vời工具。它让您可以针对特定用户组使用不同的版本，帮助您识别并修复问题，避免更广泛的发布 [1].

其他功能

扩展您的 Capacitor 设置，使用工具来改进更新交付、简化自动化和允许定制配置

Capgo 设置

使用 Capgo 的 live update 系统来简化您的工作流程。要开始，请运行：

npx @capgo/cli init

然后，调整您的 capacitor.config.ts 文件以启用实时更新：

{
  plugins: {
    CapacitorUpdater: {
      autoUpdate: true,
      statsUrl: 'https://your-stats-endpoint.com'
    }
  }
}

Capgo 的全球 CDN 提供了令人印象深刻的速度，5MB 的捆绑包仅需 114ms 即可下载。 [1]. 一旦设置了实时更新，您就可以自动化您的构建以实现更平滑的部署。

构建自动化

将 Capgo 与您的 CI/CD pipeline 集成以自动化构建和部署。它支持以下流行平台：

以下是一个 CI/CD pipeline 配置示例：

build_and_deploy:
  steps:
    - run: npm run build
    - run: npx cap sync
    - run: npx @capgo/cli deploy

自定义设置

根据您的需求调整应用程序的配置，包括实时更新和自动化之外的特定设置:

const config: CapacitorConfig = {
  ios: {
    contentInset: 'automatic',
    preferredContentMode: 'mobile'
  },
  android: {
    backgroundColor: '#ffffff',
    allowMixedContent: true
  },
  plugins: {
    SplashScreen: {
      launchAutoHide: true,
      backgroundColor: '#ffffffff',
      androidScaleType: 'CENTER_CROP'
    }
  }
};

为了获得更好的性能，请考虑以下选项:

• 启用端到端加密
• 配置用户分配
• 设置分析跟踪
• 使用回滚功能

这些工具在全球750个生产应用程序中实现了82%的成功率 [1].

问题解决

以下是如何解决常见问题并改善您的设置以实现更流畅的工作流程的方法

常见问题

依赖项冲突
如果您遇到依赖项冲突，请尝试以下命令:

npm ls @capacitor/core
rm -rf node_modules
npm install

平台相关问题

版本兼容性
确保您的配置与以下示例相符:

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'My App',
  webDir: 'dist',
  bundledWebRuntime: false,
  plugins: {
    CapacitorUpdater: {
      autoUpdate: true
    }
  }
};

通过早期解决这些问题，您可以避免不必要的障碍。

设置提示

以下是改善稳定性并避免反复出现问题的方法。

最佳实践

• 使用内置错误跟踪来快速识别和解决问题 [1].
• 设置 更新频道 用于控制发布:

{
  channels: {
    beta: {
      percentage: 25,
      deviceId: ['test-device-1']
    },
    production: {
      percentage: 100
    }
  }
}

自动维护

• 定期更新依赖项。
• 配置回滚设置以处理失败的更新：

{
  rollback: {
    enabled: true,
    maxVersions: 3,
    timeout: 300000
  }
}

• 使用端到端加密来 安全更新 [1].

概要

以下是优化的Capacitor环境如何改善开发过程的快速回顾。正确设置本地Capacitor环境可以加快开发、简化构建和更新。

正确设置的优点

• 即时更新可以加快开发周期。
• 自动化和可靠的构建过程可以节省时间和精力。

这些改进来自之前讨论的设置和集成实践。

性能亮点

Capgo-增强的Capacitor环境 取得出色的效果，包括快速响应时间、快速下载和更新成功率高 [1].

开发者优势

正确配置的环境使开发者能够专注于创建功能，而不是处理基础设施。 本指南中概述的设置确保您可以充分利用这些优势，同时满足平台要求

继续阅读《设置Capacitor本地环境》

如果您正在使用 设置Capacitor本地环境 规划原生插件工作时，连接到 Capgo插件目录 在Capgo插件目录中 Capacitor插件由Capgo 在Capacitor插件由Capgo中 添加或更新插件 为在 Adding or Updating Plugins 中的实现细节 Ionic Enterprise Plugin 的替代方案 为 Ionic Enterprise Plugin 的产品工作流程 Capgo 本地构建 为 Capgo 本地构建的产品工作流程