Quasar CLI with Vite - @quasar/app-vite

Capacitor 接口

通过 Capacitor 插件访问原生设备功能。

Capacitor 接口

此类接口的几个例子：

Camera
Device
Filesystem
Geolocation
Motion
Network
Push Notifications
Share
Splash Screen
Status Bar

使用 Capacitor 接口

让我们通过一些例子来学习，假设已经在 Quasar 项目中加入了 Capacitor 模式。

例子：地理位置

首先在 /src-capacitor 中安装插件，然后同步原生项目：

cd src-capacitor
pnpm add @capacitor/geolocation
pnpm exec cap sync

在使用之前，请查阅插件的安装和权限要求，了解每个目标平台的配置。

然后在 Quasar 项目 pages/layouts/components 下的一个 Vue 文件中，这样子写：

<template>
  <div>GPS 定位: <strong>{{ position }}</strong></div>
</template>

<script setup>
  import { ref, onMounted, onBeforeUnmount } from 'vue'
  import { Geolocation } from '@capacitor/geolocation'

  const position = ref('定位中...')

  async function getCurrentPosition() {
    const newPosition = await Geolocation.getCurrentPosition()
    console.log('当前：', newPosition)
    position.value = newPosition
  }

  let geoId

  onMounted(async () => {
    await getCurrentPosition()

    // 开始监听
    geoId = await Geolocation.watchPosition({}, (newPosition, err) => {
      if (err) {
        console.error(err)
        return
      }

      console.log('新的 GPS 定位')
      position.value = newPosition
    })
  })

  onBeforeUnmount(async () => {
    // 清除
    if (geoId !== void 0) {
      await Geolocation.clearWatch({ id: geoId })
    }
  })
</script>

例子：相机

在 /src-capacitor 中安装 @capacitor/camera，运行 pnpm exec cap sync，并按照 Camera 插件的平台配置完成设置后再使用。

然后在 Quasar 项目 pages/layouts/components 下的一个 Vue 文件中，这样子写：

<template>
  <div>
    <q-btn color="primary" label="获取图片" @click="captureImage" />

    <img :src="imageSrc" />
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { Camera, CameraResultType } from '@capacitor/camera'

  const imageSrc = ref('')

  async function captureImage() {
    const image = await Camera.getPhoto({
      quality: 90,
      allowEditing: true,
      resultType: CameraResultType.Uri
    })

    // 其结果将根据 resultType 选项的值而变化。
    // CameraResultType.Uri - 从 image.webPath 获取
    // CameraResultType.Base64 - 从 image.base64String 获取
    // CameraResultType.DataUrl - 从 image.dataUrl 获取
    imageSrc.value = image.webPath
  }
</script>

一些 Capacitor 插件（如 Camera）在浏览器中运行时提供基于 Web 的 UI。要启用这些控件，需要在主 Quasar 项目中添加 @ionic/pwa-elements：

pnpm add @ionic/pwa-elements

然后创建一个启动文件来初始化它们，比如说 /src/boot/capacitor.js：

import { defineBoot } from '#q-app'
import { defineCustomElements } from "@ionic/pwa-elements/loader";

export default defineBoot(() => {
  defineCustomElements(window);
})

不要忘了在 quasar.config 文件中调用启动脚本：

boot: ['capacitor']

现在不仅可以在原生 Android 和 iOS 中使用 Camera 接口，还可以在 SPA、PWA 等浏览器模式中使用，具体取决于插件的平台支持情况。

例子：设备

在 /src-capacitor 中安装 @capacitor/device，运行 pnpm exec cap sync，并查阅 Device 插件文档后再使用。

然后在 Quasar 项目 pages/layouts/components 下的一个 Vue 文件中，这样子写：

<template>
  <div>
    <div>型号: {{ model }}</div>
    <div>制造商: {{ manufacturer }}</div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import { Device } from '@capacitor/device'

  const model = ref('请等待...')
  const manufacturer = ref('请等待...')

  onMounted(() => {
    Device.getInfo().then(info => {
      model.value = info.model
      manufacturer.value = info.manufacturer
    })
  })
</script>

在其他 Quasar 模式中使用 Capacitor API
@quasar/app-vite v3.7+

安装在 /src-capacitor 中的包无论构建何种 Quasar 模式都可以在 /src 文件夹中被解析，因此本页面上的示例在构建 SPA、PWA 或其他模式时也能工作。许多 Capacitor 插件附带了 Web 实现，可以直接在浏览器中工作，比如上面的 Camera 示例。

对于没有 Web 实现的插件，或者只应在 Capacitor 构建的应用中运行的代码，请使用 QUASAR_CAPACITOR_MODE 环境标记和动态导入来守护用法。被守护的分支在所有其他模式的生产构建中会被死代码消除，因此不会增加它们的包体积：

if (import.meta.env.QUASAR_CAPACITOR_MODE) {
  const { Preferences } = await import('@capacitor/preferences')
  const { value } = await Preferences.get({ key: 'locale' })
  // ...
}

Caught a mistake?Edit this page in browser

Capacitor 接口