跳过主内容
Capgo logo
教程

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

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

Anik Dhabal Babu

Anik Dhabal Babu

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

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

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

本教程将指导您完成整个过程，首先使用新的 Quasar 应用程序，然后将 Capacitor 引入到原生移动应用程序的领域。另外，您还将使用 Capgo 秒内将实时更新推送到您的应用程序。

关于 Capacitor

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

使用 Capacitor，您可以获得一个没有复杂设置或陡峭学习曲线的精美原生移动应用程序。其轻薄的 API 和流线化的功能使其成为轻松整合到您的项目中的理想选择。相信我，您将惊叹于如何轻松地使用 Capacitor 实现一个功能齐全的原生应用程序！

准备您的 Quasar 应用程序

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

npm init quasar

Quasar 项目设置

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

为了创建一个原生移动应用程序，我们需要一个 export 我们的项目中。因此，让我们在我们的 package.json package.json

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

执行命令后 generate你应该能够在项目根目录看到一个新的 dist 这个文件夹将由 __CAPGO_KEEP_0__ 后来使用，但现在我们必须正确设置它。

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

Adding Capacitor to Your Quasar App

命令。 sync 首先，我们可以安装

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

到目前为止，您应该能够在Quasar项目中观察到新的 ios 和 android 文件夹。这些是真正的本机项目！

稍后要访问Android项目，您必须安装

Android Studio Capgo. For iOS, you need a Mac and should install Xcode.

另外，您应该找到一个 capacitor.config.ts file in your project, which contains some fundamental Capacitor settings utilized during the sync. The only thing you need to pay attention to is the __CAPGO_KEEP_0__设置，在同步过程中使用。您需要注意的是

webDir capacitor.config.json 为了纠正这个问题，请打开 __CAPGO_KEEP_0__.config.json:

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

文件并更新

npm run generate
npx cap sync

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

此外，同步命令可能会更新原生平台并安装插件，因此当您安装新的 Capacitor 插件时 npx cap sync 是时候再次运行

了。

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

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

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

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 is a service that allows developers to deploy updates to their mobile apps without going through the traditional App Store submission process. This can be a convenient way to quickly fix bugs or make small updates to an app without waiting for the App Store review process.

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

注册并访问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 CLOUD:

首先使用 all api_key 在您的帐户中有一个用于登录的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 如果构建存在

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

Make channel default:

在Capgo发送应用后，需要将您的频道设置为默认频道，以便应用接收来自Capgo的更新。

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

Configure app to validate updates:

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

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

CapacitorUpdater.notifyAppReady()

Then do a npm run build && npx cap copy to update your app.

to update your app.:

Receive a Live Update

  npx cap run [ios | android]

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

打开应用，放到后台并再次打开，应在日志中看到应用已更新。 恭喜！ 🎉 您已成功部署第一个实时更新。这只是您可以使用实时更新的开始。要了解更多信息，请查看完整的.

Live Updates docs","使用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

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

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

可选：添加 Konsta UI 要在 Quasar 应用中使用 Konsta UI，您需要先安装 并且要安装包：

npm i konsta

另外，您需要修改 tailwind.config.js 文件：

// import konstaConfig config
const konstaConfig = require('konsta/config')

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: [
    './pages/**/*.{vue}',
    './components/**/*.{vue}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfig 将会扩展默认（或您的自定义）Tailwind CSS配置文件，添加一些额外的变体和辅助工具，以便为Konsta UI提供所需的功能。

现在我们需要设置主 App 组件，以便我们可以设置一些全局参数（如 theme).

我们需要将整个应用程序包裹在 App 中 pages/_app.vue:

<template>
  <App theme="ios">
    <Quasar />
  </App>
</template>

<script setup>
import { App } from 'konsta/vue';
</script>

示例页面

当一切设置好后，我们就可以在Quasar页面中使用Konsta UI Vue组件了。

例如，让我们打开 pages/index.vue targetLanguage":"简体中文"

<template>
  <Page>
    <Navbar title="My App" />

    <Block strong>
      <p>
        Here is your Quasar & Konsta UI app. Let's see what we have here.
      </p>
    </Block>
    <BlockTitle>Navigation</BlockTitle>
    <List>
      <ListItem href="/about/" title="About" />
      <ListItem href="/form/" title="Form" />
    </List>

    <Block strong class="flex space-x-4">
      <Button>Button 1</Button>
      <Button>Button 2</Button>
    </Block>
  </Page>
</template>

<script setup>
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
  Link,
  BlockTitle,
} from 'konsta/vue';
</script>

If the live reload is out of sync after installing all the necessary components, try restarting everything. Once you have done that, you should see a mobile app with a somewhat native look, built with Quasar and Capacitor!

texts":["如果在安装所有必要组件后，实时重载仍然不一致，尝试重新启动所有内容。完成后，您应该看到一个具有某种本地外观的移动应用，使用 Quasar 和 __CAPGO_KEEP_0__ 构建！"

Capacitor is an excellent option for building native applications based on an existing web project, offering a simple way to share code and maintain a consistent UI.

__CAPGO_KEEP_0__ 是基于现有 Web 项目构建本地应用的出色选择，提供一种简单的方式来共享 __CAPGO_KEEP_1__ 并保持一致的 UI。" Capgo__CAPGO_KEEP_0__"，使得添加实时更新到应用变得更加容易，确保您的用户始终可以访问最新的功能和 bug 修复。"

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

为Capacitor应用实时更新

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

立即开始

最新博客文章

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

Capacitor 应用中的双向通信
开发,移动,更新
2025 年 4 月 26 日

Capacitor 应用中的双向通信

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

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

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

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

查看我们的博客