跳过主要内容
教程

使用实时更新、Quasar和Capacitor创建移动应用

如何使用Quasar、Capacitor和实时更新创建移动应用

文章来源

马丁·多纳迪厄

作者

瓦莱里亚

审阅者

乔丹

编辑
使用 Quasar 和 Capacitor 创建实时更新的移动应用。

在本教程中，我们将从创建一个新的Web应用开始，使用 Quasar. Later on, we’ll learn how to turn it into a mobile app using Capacitor. If you want to make your app look better on mobile.

With Capacitor, you can change your Quasar web app into a mobile app without needing to do lots of hard things or learn a completely new way of making apps like you would with something called React Native.

This tutorial will guide you through the process, starting with a new Quasar app and then incorporating Capacitor to move into the realm of native mobile apps. Additionally, you will use Capgo 秒内将live update发送到您的应用程序。

关于Capacitor

CapacitorJS确实是一个游戏改变者！您可以轻松将其整合到任何Web项目中，它将您的应用程序包装在一个本机Web视图中，生成Xcode和Android Studio项目。其插件还提供通过JS桥接访问本机设备功能，如摄像头。

With Capacitor, you get a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it a breeze to integrate into your project. Trust me, you’ll be amazed at how effortless it is to achieve a fully functional native app with Capacitor!

准备您的Quasar应用程序

要创建一个新的Quasar应用程序，请运行以下命令：

npm init quasar

Quasar项目设置

选择“Quasar CLI”选项，然后选择“Quasar v2”。

为了创建一个本机移动应用程序，我们需要导出我们的项目。因此，让我们在我们的项目中包含一个简单的脚本。 导出 我们的项目 package.json 可以用来构建和复制 Quasar 项目的文件:

{
  "scripts": {
    // ...
    "build": "quasar build"
  }
}

执行命令后 generate你应该在项目根目录看到一个新的 dist 文件夹。这个文件夹将在后续步骤中被 __CAPGO_KEEP_0__ 使用，但现在我们需要正确地设置它。

将 Capacitor 添加到 Quasar 应用程序中

在您的 Quasar 应用程序中添加 Capacitor

首先，我们可以将 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ 安装为开发依赖项，然后在项目中设置它。在设置过程中，你可以按“回车”键以接受名称和包 ID 的默认值。 sync package.json

可以用来构建和复制 Quasar 项目的文件: Capacitor CLI 你应该在项目根目录看到一个新的文件夹。这个文件夹将在后续步骤中被 __CAPGO_KEEP_0__ 使用，但现在我们需要正确地设置它。

接下来，我们需要安装核心包和iOS和Android平台相关的包。

最后，我们可以添加平台，Capacitor会在项目根目录创建每个平台的文件夹：

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your Quasar project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

初始化Capacitor

此时您应该能够观察到新的 ios 和 android android

context:HTML text fragment from a longer Capgo UI string (parent key `compare_step_build_text`). Page/area: Capgo marketing website. Role: Long marketing or legal paragraph. Seen in: page alternatives/expo.astro, page alternatives/voltbuilder.astro. Message key `compare_step_build_text` (Compare Step Build Text).

文件夹在您的Quasar项目中。 这些是真正的本机项目！要访问Android项目，必须安装 Xcode.

另外，您应该找到一个 capacitor.config.ts 在您的项目中找到一个文件，包含一些基本的Capacitor设置，用于同步过程。您需要注意的是 webDir,必须指向您的构建命令的结果。当前它是不准确的。

为了修复这个问题，请打开 capacitor.配置文件 文件并更新 webDir:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "dist"
}

您可以通过执行以下命令来尝试它:

npm run generate
npx cap sync

第一个命令 npm run generate 会简单地构建您的 Quasar 项目并复制静态构建，而第二个命令 npx cap sync 会同步所有 web code 到原生平台的正确位置，以便在应用中显示。

此外，同步命令可能会更新原生平台并安装插件，因此当您安装新 Capacitor 插件 context: Capgo solutions marketing page. Role: Short UI label or navigation item. Seen in: page solutions/webapp-to-mobile.astro. Preserve Capgo product/brand and developer terms exactly. Message key `solutions_webapp_to_mobile_link_plugins` (Solutions Webapp To Mobile Link Plugins). npx cap sync 它的时间

再次运行。

您可能没有注意到，但现在实际上已经完成了，所以让我们在设备上看看应用!

构建和部署原生应用 Xcode Xcode 并且为了开发 Android 应用，您需要安装 已安装。另外，如果您打算在应用商店上发布您的应用程序，则需要在 iOS 中注册 Apple Developer Program，在 Android 中注册 Google Play Console。

如果您是新手，想开始native mobile开发，您可以使用Capacitor CLI轻松打开native项目。

npx cap open ios
npx cap open android

一旦您设置了本机项目，部署应用程序到连接设备就很容易了。在 Android Studio 中，只需等待所有内容就绪，然后您可以在不更改任何设置的情况下将应用程序部署到连接设备。以下是示例：

android-studio-run

在 Xcode 中，您需要设置签名帐户才能将应用程序部署到真实设备，而不是仅在模拟器上。如前所述，如果您还没有这样做，Xcode 将指导您完成此过程（但您仍然需要注册开发者计划）。完成后，您只需点击播放即可在连接设备上运行应用程序，您可以在顶部选择设备。以下是示例：

xcode-run

恭喜！您已成功将 Quasar Web 应用程序部署到移动设备。以下是示例：

quasar-mobile-app

但等一下，还有更快的方法可以在开发期间完成此操作…

Capgo Live Update

Capgo Live Update 是一个服务，允许开发者在不通过传统的应用商店提交过程的情况下将更新部署到移动应用程序。这可以是一个方便的方法来快速修复 bug 或对应用程序进行小型更新，而无需等待应用商店的审查过程。

在您的Quasar应用中集成Capgo是一个简单的过程，能够让您利用实时更新的力量。这一步一步的指南将指导您完成Capgo Live Update的集成和实现，从而让您能够提供无缝的更新。

注册并访问Capgo控制台:

是时候注册并获取您的API密钥来上传您的第一个版本！从而开始 注册一个Capgo账户.

安装Capgo SDK:

从命令行直接在您的Capacitor应用的根目录下运行：

npm i @capgo/capacitor-updater && npx cap sync 将Capacitor插件安装到您的Capacitor应用中。

然后将code添加到您的应用中，取代CodePush：

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

这将告诉原生插件安装成功。

登录Capgo云:

首先使用 all apikey 在您的帐户中可用以使用 CLI 登录:

`npx @capgo/cli@latest login YOU_KEY`

添加您的第一个应用:

让我们从创建一个 Capgo 云中的应用开始，使用 CLI。

    npx @capgo/cli@latest app add

该命令将使用 Capacitor 配置文件中定义的所有变量来创建应用。

上传您的第一个版本:

运行命令以构建您的 code 并将其发送到 Capgo:

npx @capgo/cli@latest bundle upload`

默认情况下，版本名称将来自您的 package.json 文件。

检查入 Capgo 如果构建存在。

您甚至可以使用我的 移动沙盒应用进行测试.

设置默认频道:

您已经将应用程序发送到Capgo，接下来您需要将您的频道设置为默认频道，以便应用程序可以从Capgo接收更新。

npx @capgo/cli@latest channel set production -s default

配置应用程序以验证更新:

将此配置添加到主 JavaScript 文件中。

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

然后执行 npm run build && npx cap copy 更新您的应用程序。

接收Live Update:

为了让您的应用程序接收来自 Deploy 的live update，您需要在设备或模拟器上运行应用程序。最简单的方法是使用以下命令在模拟器或连接到计算机的设备上启动本地应用程序。

  npx cap run [ios | android]

打开应用程序，放到后台，然后再次打开它，您应该在日志中看到应用程序已经更新。

恭喜！🎉 您已经成功部署了第一个Live Update。这只是您可以使用 Live Updates 做的事情的开始。要了解更多信息，请查看完整的 Live Updates 文档.

使用Capacitor 插件

让我们看看如何使用一个 Capacitor 插件的实例，这个我们之前提到过几次。要做到这一点，我们可以通过运行以下命令来安装一个相当简单的插件：

npm i @capacitor/share

没有什么特别的关于这个 分享插件,但它仍然会弹出原生分享对话框！为了实现这一点，我们现在只需要导入包并从我们的应用中调用相应的 share() 函数，所以让我们修改 pages/index.vue 到这个：

<template>
  <div>
    <h1>Welcome to Quasar and Capacitor!</h1>
    <button @click="share">Share now!</button>
  </div>
</template>

<script setup lang="ts">
import { Share } from '@capacitor/share';

async function share() {
  await Share.share({
    title: 'Open Youtube',
    text: 'Check new video on youtube',
    url: 'https://www.youtube.com',
    dialogTitle: 'Share with friends'
  });
}
</script>

如前所述，当安装新插件时，我们需要执行同步操作，然后重新部署应用到设备上。要做到这一点，请运行以下命令：

npx cap sync

点击按钮后，您可以亲眼目睹美丽的原生分享对话框！

接下来，您可以使用 Capgo 导航和过渡使应用在 iOS 和 Android 上感觉更原生，并修复常见的 iOS 布局问题，例如水平溢出或裁切安全区域。

原生感觉的 UI 使用 Capgo 原生导航和过渡

我已经与 ionic 构建跨平台应用，但将其与quasar集成起来很hacky，并且当你已经有 tailwind css.

在quasar + Capacitor应用中，为了获得native mobile的感觉，使用Capgo插件代替web-only UI kits，如konsta ui：

  • @capgo/capacitor原生导航 —— native navbar，liquid glass tab bar在ios上，android上使用模糊tab bar样式。你的quasar路由器保持路由状态；插件拥有native chrome。
  • @capgo/capacitor-过渡 —— ionic风格的页面过渡和ios边缘滑动返回在webview层，未采用ionic UI。

安装两个：

npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap sync

配置native导航使用css inset模式，使web内容尊严native bars：

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

渲染液态玻璃tab bar（ios使用系统渲染；android使用模糊webview背景）：

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  router.push(`/${id}`);
});

在应用壳中添加native页面过渡：

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/vue';

initTransitions({ platform: 'auto' });

const router = useRouter();
const outletRef = ref(null);

onMounted(() => {
  if (outletRef.value) {
    setupRouterOutlet(outletRef.value, { platform: 'auto', swipeGesture: 'auto' });
  }
});

const openSettings = () => {
  setDirection('forward');
  router.push('/settings');
};
</script>

<template>
  <cap-router-outlet ref="outletRef">
    <router-view />
  </cap-router-outlet>
</template>

将路由页面包裹在 cap-router-outlet, cap-page, 和 cap-content, 并调用 setDirection('forward') 或 setDirection('back') 在导航之前进行包裹。不要在原生导航拥有这些表面时重复web页头部或页脚。

查看完整指南： 使用@capgo/capacitor原生导航 和 使用@capgo/capacitor过渡.

安全区域使用Tailwind

为了在Tailwind CSS中使用设备安全区域，请使用 @capgo/Tailwind-capacitor (发布为) tailwind-capacitor (在 npm 上) safe-areas utilities 和其他 Capacitor 兼容的 Tailwind 插件

npm add -D tailwind-capacitor

In src/css/app.scss:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

在 pt-safe, pb-safe使用工具 px-safe , 和 env(safe-area-inset-*) 而不是手动添加 在GitHub上提交一个PR.

通过手动添加

该项目正在积极开发中 — 如果您的 Quasar 设置缺少某些内容，请在 __CAPGO_KEEP_0__ 上打开一个 PR overflow-x: hidden 修复 iOS 布局问题 (视口、安全区域和水平溢出)

确保视口元标签正确应用

在 index.html (或您的Quasar HTML模板) <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

设置视口元标签在

从根包装器中处理iOS安全区域

html,
body,
#q-app {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

创建一个单一的应用程序外壳并在那里应用安全区域填充 — 不在多个嵌套组件中: .app-shell将所有页面内容包装在

With @capgo/Tailwind-capacitor@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ pt-safe pb-safe px-safe ，您可以用类似于

设置Capacitor iOS contentInset 前往 never 首先

在 capacitor.config.ts, 优先使用原生禁用并让 CSS (或 Native Navigation 的) contentInsetMode: 'css') 来控制安全区域：

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'dist/spa',
  ios: {
    contentInset: 'never',
  },
};

混合 Capacitor 自动内容内边距与 CSS env(safe-area-inset-*) padding 是双倍间距的常见原因。

找到真正溢出的元素

通常的凶手是使用 100vw, Tailwind w-screen, 固定像素宽度或较大的 min-width.

在 Safari Web Inspector 中运行：

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

使用 Tailwind 替换 w-screen 使用 w-full 当可能时，许多水平溢出问题来自 100vw / w-screen, 重复的安全区域填充或固定宽度容器 —— 不是来自视口元标签本身。

结论

Capacitor 是基于现有 Web 项目构建原生应用的优秀选择，提供了一个简单的方式来共享 code 并保持一致的 UI。

并且，通过添加 Capgo，即使是添加实时更新到您的应用程序也变得更加容易，从而确保您的用户始终可以访问最新的功能和 bug 修复。

如果您想学习如何将 Capgo 添加到您的 Next.js 应用程序中，请查看下一篇文章：

继续阅读 Creating Mobile Apps with 实时更新，Quasar 和 Capacitor。

如果您正在使用 使用 Capacitor 和 Quasar 创建移动应用，支持实时更新。 为了规划原生插件的工作，连接它与 Capgo 插件目录 在 Capgo 插件目录中了解产品工作流程 Capacitor 插件由 Capgo 提供 在 Capacitor 插件由 Capgo 提供中了解实现细节 添加或更新插件 在添加或更新插件中了解实现细节 Ionic 企业插件替代方案 了解 Ionic 企业插件替代方案中的产品工作流程，和 Capgo 原生构建 了解 Capgo 原生构建中的产品工作流程

Capacitor 应用的实时更新

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

Page/area: Capgo marketing website. Role: Supporting description paragraph or meta description. Seen in: component BlogListing.astro, component GetStarted.astro. Preserve Capgo product/brand and developer terms exactly. Message key `instant_updates_for_capacitor_apps_description` (Instant Updates For Capacitor Apps Description).

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

双向通信在Capacitor应用中
Development 移动应用 +1
2025年4月26日

Capacitor应用中的双向通信

避免的5种OTA更新常见错误
开发 安全性 +1
2025年4月13日

避免的5种OTA更新常见错误

移动应用实时更新的5个安全最佳实践
开发 移动应用 +1
2025年1月14日

5 移动应用实时更新的安全最佳实践

查看我们博客的所有内容