跳过主内容
Capgo logo
教程

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

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

阿尼克·德哈巴尔·巴布

阿尼克·德哈巴尔·巴布

内容营销人员
使用实时更新、Quasar和Capacitor创建移动应用

在本教程中，我们将从创建一个新的Web应用程序开始，使用 Quasar。之后，我们将学习如何将其转换为移动应用程序使用 Capacitor。如果您想让您的应用程序在移动设备上看起来更好。

使用 Capacitor，您可以将Quasar Web应用程序转换为移动应用程序，无需进行大量繁琐的工作或学习一种完全新的应用程序制作方式，如您在React Native中所做的那样。

本教程将指导您完成整个过程，首先是新Quasar应用程序，然后将Capacitor集成到移动应用程序中。另外，您还将使用Capacitor来实时更新您的应用程序。 关于Capgo CapacitorJS是一个真正的游戏改变者！您可以轻松将其集成到任何Web项目中，它将您的应用程序包装在一个原生Webview中，生成原生Xcode和Android Studio项目。另外，它的插件提供了对原生设备功能的访问，如摄像头通过JS桥。

使用Capacitor，您可以获得一个功能齐全的原生移动应用程序，无需复杂的设置或陡峭的学习曲线。它的__CAPGO_KEEP_1__和功能流线化使其成为轻松集成到您的项目中的一个好选择。相信我，您将惊讶于如何轻松地使用__CAPGO_KEEP_2__实现一个功能齐全的原生应用程序！

准备您的Quasar应用程序

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!

__CAPGO_KEEP_0__

__CAPGO_KEEP_1__

npm init quasar

Quasar 项目设置

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

为了创建一个原生移动应用，我们需要一个项目的 export 。因此，让我们在我们的 package.json 中添加一个简单的脚本，以便可以利用它来构建和复制 Quasar 项目：

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

执行命令后， generate你应该能够在项目根目录看到一个新的 dist 文件夹。

这个文件夹将由 Capacitor 后来使用，但现在我们必须正确设置它。

将 Capacitor 添加到您的 Quasar 应用程序中

为了将任何web应用打包到原生移动容器中，我们必须遵循几个初始步骤，但之后只需执行一个 sync 命令即可。

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

接下来，我们需要安装核心包和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 你的Quasar项目中的文件夹。

这些是真正的本地项目！

为了以后访问Android项目，必须安装 Android Studio.对于iOS，您需要一台Mac，并应安装 Xcode.

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

为了纠正这个问题，请打开 capacitor.config.json __CAPGO_KEEP_0__文件和更新 webDir:

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

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

npm run generate
npx cap sync

第一个命令 npm run generate 将仅仅构建您的Quasar项目并复制静态构建，而第二个命令 npx cap sync 将同步所有的code到native平台的正确位置，以便它们可以在应用中显示。

此外，同步命令可能会更新native平台并安装插件，因此当您安装新的 Capacitor插件 时，需要重新运行 npx cap sync 命令。

不经意间，您现在实际上已经完成了，所以让我们在设备上看看应用!

Build and Deploy native apps

为了开发iOS应用，您需要安装 Xcode 并且为了开发Android应用，您需要安装 Android Studio 。此外，如果您打算在应用商店上发布您的应用，则需要在iOS中加入Apple Developer Program，在Android中加入Google Play Console。

如果您是native移动开发的新手，可以使用Capacitor CLI轻松打开两种native项目：

npx cap open ios
npx cap open android

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

android-studio-run

在Xcode中，您需要设置签名账户才能将应用部署到真实设备，而不是仅仅在模拟器上运行。如果您之前没有做过这个，Xcode会引导您完成整个过程（但请再次注意，您需要加入开发者计划）。之后，您只需点击播放即可在连接设备上运行应用，您可以在顶部选择设备。以下是示例：

xcode-run

恭喜！您成功部署了Quasar web应用到移动设备。以下是示例：

quasar-mobile-app

But hold on, there’s also a faster way to do this during development…

Capgo Live Update

Capgo Live Update 是一种允许开发人员在不通过传统 App Store 提交流程的情况下部署应用程序更新的服务。这可以是一种快速修复 bug 或对应用程序进行小型更新而不必等待 App Store 审核流程的便捷方式。

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

注册并访问 Capgo 控制台:

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

Install the Capgo SDK:

将插件安装到您的 Capacitor 应用程序中。

npm i @capgo/capacitor-updater && npx cap sync 然后将 Capacitor 添加到您的应用程序中，作为 CodePush 的替代品：

And then add to your app this code as a replacement of CodePush one:

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

CapacitorUpdater.notifyAppReady()

这将告诉本地插件安装成功。

登录到Capgo CLOUD:

首先，使用 all api_key present in your account to log in with the CLI:

`npx @capgo/cli@latest login YOU_KEY`

添加您的第一个App:

让我们从创建一个应用程序开始Capgo Cloud中，使用CLI。

    npx @capgo/cli@latest app add

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

上传您的第一个版本:

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

npx @capgo/cli@latest bundle upload`

默认情况下，版本名称将是您的package.json文件中的一个。

检查 Capgo 如果有构建存在。

您甚至可以使用我的移动沙盒应用测试它。 设置通道默认.

您已经将应用发送到__CAPGO_KEEP_0__后，需要将您的通道设置为默认值，以便应用可以从__CAPGO_KEEP_1__接收更新。:

After you have sent your app to Capgo, you need to make your channel default to let apps receive updates from 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 实时更新

为了让您的应用从Deploy接收实时更新，您需要在设备或模拟器上运行应用。最简单的方法是使用以下命令直接在模拟器或连接到计算机的设备上启动本地应用。:

For your application to receive a live update from Deploy, you’ll need to run the app on a device or an emulator. The easiest way to do this is simply to use the following command to launch your local app in an emulator or a device connected to your computer.

  npx cap run [ios | android]

打开应用，放到后台再打开，应该在日志中看到应用已经更新了。

恭喜！ 🎉 您成功部署了第一个Live Update。这只是Live Updates的开始。要了解更多，请查看完整的 Live Updates 文档.

使用 Capacitor 插件

让我们看看如何使用一个 Capacitor 插件的示例，我们之前提到过几次。要做到这一点，我们可以通过运行：

npm i @capacitor/share

这个插件并没有什么特别的，但它仍然可以弹出原生分享对话框！为了实现这一点，我们现在只需要导入包并从我们的应用中调用相应的 函数，所以让我们修改pages/index.vue share() 到这个： 如前所述，当安装新插件时，我们需要执行同步操作，然后重新部署应用到设备上。要实现这一点，请运行以下命令： __CAPGO_KEEP_0__

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

__CAPGO_KEEP_0__

npx cap sync

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

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

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

我已经工作了几年， Ionic 来构建跨平台应用，但将其与Quasar集成起来很hacky，并且很少值得在您已经有 Tailwind CSS.

For a native mobile feel in a Quasar + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

安装双方:

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

使用 CSS inset 模式配置原生导航，以便 web 内容尊严地尊严原生导航条:

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

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

呈现 Liquid Glass tab 条 (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}`);
});

在应用壳中添加原生页面过渡:

<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-native-navigation 和 使用@capgo/capacitor-转换.

使用Tailwind的安全区域

在Tailwind CSS中使用设备安全区域，使用 @capgo/tailwind-capacitor （发布于 tailwind-capacitor 在npm上发布。它提供 safe-areas 友好Tailwind的Capacitor插件：

npm add -D tailwind-capacitor

在 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-*) 。该项目正在积极开发中——如果您的Quasar设置缺少某些内容 在 GitHub 上打开一个 PR.

修复 iOS 布局问题 (视口、安全区域和水平溢出)

如果内容在 iOS 上被裁切、偏移或水平滚动，仅添加或调整视口标签通常无法解决问题。按照以下顺序检查这些问题。 overflow-x: hidden 确保视口元标签正确应用

在

(或您的 Quasar HTML 模板中)，在 index.html 从根包装器中处理 iOS 安全区域 <head>:

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

创建一个单独的应用程序 shell 并在其中应用安全区域填充 — 不要在多个嵌套组件中：

将所有页面内容包装在

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);
}

在头部、模态和布局包装器中重复应用安全区域填充通常会使 UI 看起来被裁切或过大。 .app-shellWith

With @capgo/tailwind-capacitor,你可以用类似这样的工具来表示相同的填充 pt-safe pb-safe px-safe 在单个shell中

设置Capacitor iOS contentInset 到 never 首先

在，优先使用原生边距禁用并让CSS（或Native Navigation的）拥有安全区域： capacitor.config.ts混合__CAPGO_KEEP_0__的自动内容内边距与CSS contentInsetMode: 'css'填充是双倍间距的常见原因

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

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) __CAPGO_KEEP_0__

__CAPGO_KEEP_1__

通常的罪魁祸首是使用 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 应用程序中，请查看下一篇文章：

继续从使用 live updates 的移动应用程序、Quasar 和 Capacitor 中学习。

如果您正在使用 使用 live updates 的移动应用程序、Quasar 和 Capacitor 来规划原生插件工作，连接它与 Capgo 插件目录 为 Capgo 插件目录 中的产品工作流程 Capacitor 由 Capgo 提供的插件 为 Capacitor 由 Capgo 提供的插件的实现细节 添加或更新插件 为添加或更新插件的实现细节 Ionic 企业版插件替代品 为 Ionic 企业版插件替代品中的产品工作流程 Capgo 原生构建 为 Capgo 原生构建中的产品工作流程

实时更新Capacitor应用

当web层bug处于活跃状态时，通过Capgo将修复推送给用户，而不是等待几天的应用商店审批。用户在后台接收更新，而原生变化仍然在正常审批路径中。

立即开始

最新博客

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

Capacitor应用中的双向通信
开发 移动 +1
2025年4月26日

Capacitor应用中的双向通信

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

5 个常见的 OTA 更新错误的避免方法

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

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

查看我们的博客中的所有内容