跳过主要内容

Capacitor CLI:项目设置指南

了解如何使用几种简单步骤在web技术中构建原生iOS和Android应用的Capacitor CLI

马丁·多纳迪尤

马丁·多纳迪尤

目标语言:简体中文

Capacitor CLI: 项目设置指南

想用一套代码构建 iOS 和 Android 应用吗? Capacitor CLI 简化了这一过程,让您使用 web 技术创建原生应用。以下是您将学到的内容:

  • 快速设置:安装 Capacitor CLI 并在几分钟内初始化您的项目。
  • 平台集成:使用简单的命令添加 iOS 和 Android 支持。
  • 实时更新:使用 __CAPGO_KEEP_0__ Capgo 即时通过互联网进行更新。
  • 常见问题: troubleshoot sync errors or build failures.

开始的关键步骤:

  1. 安装 Node.js, npm, JDK, Xcode, 和 Android Studio.
  2. 运行 npm install @capacitor/core @capacitor/cli 并初始化您的项目。
  3. 添加 iOS 和 Android 平台 npx cap add iosnpx cap add android.
  4. 可选:设置Capgo用于实时 应用程序更新.

本指南涵盖了设置Capacitor CLI、配置平台和部署应用程序所需的一切。让我们开始吧!

介绍 Capacitor 配置

Capacitor 框架文档网站

设置要求

要开始使用,请确保已安装以下工具:

  • Node.js (或更高版本) 和 npm
  • Java JDK (或更高版本)
  • Xcode (iOS构建需要12或更高版本)
  • Android Studio (用于Android构建)
  • Capacitor CLI (版本6或7)

可选: If you want to enable live updates, check out the “Capgo Setup Guide” below.

CLI Installation Steps

Before starting, ensure you have Node.js, npm, JDK, Xcode, and Android Studio set up. Once ready, you can install the Capacitor CLI by running:

npm install --save @capacitor/core @capacitor/cli
npx cap init

This command installs Capacitor and sets up its core components.

After completing this step, move on to 创建新项目 创建新项目

使用__CAPGO_KEEP_0__ __CAPGO_KEEP_1__

更新配置文件 using Capacitor CLI文件以包含以下设置:

mkdir my-app && cd my-app
npm init -y
npx cap init my-app com.company.app --web-dir dist

更新后,使用此配置文件来为项目设置__CAPGO_KEEP_0__。

更新配置文件 capacitor.config.json 编辑

{
  "appId": "com.company.app",
  "appName": "My App",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "server": {
    "hostname": "app.example.com",
    "androidScheme": "https"
  }
}

Once updated, use this configuration to set up Capacitor for your project.

平台设置

现在项目骨架搭建完成,时刻准备设置iOS和Android目标。

添加iOS和Android

首先使用Capacitor CLI安装必要的平台特定包。

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

对于iOS,确保您有Xcode 14或更高版本, CocoaPods 1.11或更新版本,以及macOS 12或更高版本。对于Android,您需要Android Studio Giraffe(2022.3.1+)、JDK 17或更高版本,以及 Gradle 7.5或更高版本。

一旦安装完成,您就需要将native目标与web应用程序的更改保持同步。

平台更新

同步您的平台与最新的web更改,请按照以下步骤更新您的web应用程序:

npm run build
npx cap sync

该命令处理两个任务: cap sync 将更新的 Web 资产复制到本机平台

  • 更新本机配置和插件以匹配最新的更改
  • IDE 配置

在适当的 IDE 中打开平台特定的项目:

在 Xcode 中:

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

选择您的开发团队。

  1. 设置签名证书。
  2. 更新您的包标识符。
  3. 在 Android Studio 中:

修改应用程序 ID

  1. 在 Android Studio 中: build.gradle.
  2. 配置签名的keystore。
  3. 设置debug和release两种构建变体。

当所有配置完成后,使用 npx cap build iosnpx cap build android再次运行 npx cap sync 确保所有资产都最新化。

Capgo Setup 指南

Capgo 实时更新控制台界面

设置Capgo以便于您的应用程序即时进行线上更新。

Capgo的关键功能

Capgo提供了多种工具来简化应用程序更新:

  • 端到端加密 确保更新的安全传递。
  • 更新 在应用程序启动时 在后台
  • 分析工具 帮助跟踪更新成功率和用户参与度。
  • 一个 单击回滚 选项让您快速恢复从有问题的更新。
  • 使用 频道系统 在__CAPGO_KEEP_0__中

安装Capgo

开始使用Capgo:

  1. 安装Capgo的CLI:

    npm install --save @capgo/cli
  2. 初始化Capgo 在您的项目中:

    npx capgo init
  3. 构建和发布更新:

    npm run build
    npx capgo release
  4. 打开应用程序以触发后台更新过程。

最佳实践

  • 使用渠道测试更新之前将其发布给所有用户。
  • 监控分析以确保更新成功并且用户保持活跃。
  • 启用错误跟踪以及早捕获和修复问题。
  • Keep the rollback feature ready to quickly address any problems.

Capgo 与 Capacitor 8 兼容,集成 CI/CD pipeline,满足 Apple 和 Google 商店要求。

Common Issues and Tips

Once you’ve completed the platform and Capgo setup, you might face some common errors. Here’s how to address them quickly.

__CAPGO_KEEP_0__ 未找到

  • CLI Not Found 执行失败。解决:重新运行并尝试。 npx cap fails. 环境设置问题: Run npm install --save @capacitor/cli @capacitor/core __CAPGO_KEEP_0__ 未找到

  • Node 版本不符 错误: CLI 命令因 Node.js 版本错误而失败。 修复: 请按照设置要求安装 Node.js 版本 14 或更高。

配置问题

  • 配置不符 错误: capacitor.config.json 的修改没有生效。 修复: 确保 appId and webDir 值得您项目的 package.json 和 web 构建输出文件夹。

  • 平台同步错误 错误: 运行 npx cap sync 会导致插件版本冲突。 修复: 更新 @capacitor/android@capacitor/ios 到同一主版本号,然后重新运行同步命令。

构建和部署

  • 签名失败 错误: iOS 或 Android 构建因缺少证书或密钥库而失败。 修复: 请遵循 IDE 配置指南。对于 iOS,添加您的开发团队在 Xcode 中。对于 Android,配置密钥库在 build.gradle.

  • 未找到 Web 目录 错误: npx cap sync 无法找到 Web 资产。 修复: 运行您的 Web 构建命令(例如 npm run buildLive Update 问题

__CAPGO_KEEP_0__

  • Capgo 更新失败 错误: 在生产应用中,更新没有显示出来。 修复: 检查一下你的 Capgo APIcapacitor.config.json 和确保你正在针对正确的渠道。

有关平台特定设置的更多详细信息,请参阅 Platform Setup 部分。如果你正在使用实时更新,请参阅 Capgo Setup Guide 以获取更多故障排除提示。

概要

设置检查

使用 Capacitor CLI 启动你的 web 应用,设置 iOS 和 Android 平台,并可选地包含 Capgo 以支持实时更新。

Here’s how to get started:

  • 使用 Capacitor CLI 来初始化您的项目。
  • 设置您的应用程序的包 ID 和定义 Web 输出目录。
  • 添加 iOS 和 Android 平台的支持。
  • 使用以下命令安装并设置 Capgo: npm install --save @capgo/cli && npx capgo init

有关详细设置说明或故障排除,请参阅官方 Capacitor 和 Capgo 文档。

继续阅读 Capacitor CLI: 项目设置指南

如果您正在使用 Capacitor CLI: 项目设置指南 来规划仪表板和 API 操作,连接它与 API 概览 了解 API 概览 中的实现细节。 简介 简介中的实现细节 API Keys API Keys中的实现细节 设备 简介中的实现细节 __CAPGO_KEEP_0__

为 Capacitor 应用程序提供实时更新

当 web 层面的 bug 在实时更新时,通过 Capgo 将修复推送给用户,而不是等待几天的 app store 审批。用户在后台接收更新,而原生变化仍然在正常的审批路径中

立即开始

最新博客文章

Capgo 为您提供创建真正专业的移动应用所需的最佳见解。