您可以使用Capacitor API连接到原生设备API。

Capacitor APIs

此类API的一些示例：

• Background Task
• Camera
• Console
• Device
• Filesystem
• Geolocation
• Motion
• Network
• Push Notifications
• Share
• Splash Screen
• Status Bar

使用Capacitor API

让我们通过一些例子来学习，假设您已经将Capacitor模式添加到Quasar项目中。

例子: 地理位置

第一步是阅读我们要使用的Capacitor API的文档。 我们看一下Capacitor的Geolocation API。

现在，让我们将此插件充分利用。 在您的Quasar项目的页面/布局/组件Vue文件之一中，我们编写：

// 一些Vue文件
// 记住这只是一个例子；
// 仅查看我们如何使用插件页面中描述的API；
// 这里的其他事情都不重要

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

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

export default {
  setup () {
    const position = ref('determining...')

    function getCurrentPosition() {
      Geolocation.getCurrentPosition().then(newPosition => {
        console.log('Current', newPosition)
        position.value = newPosition
      })
    }

    let geoId

    onMounted(() => {
      getCurrentPosition()

      // 我们开始监听
      geoId = Geolocation.watchPosition({}, (newPosition, err) => {
        console.log('New GPS position')
        position.value = newPosition
      })
    })

    onBeforeUnmount(() => {
      // 我们做清理
      Geolocation.clearWatch(geoId)
    })

    return {
      position
    }
  }
}
</script>

例子: 相机

第一步是阅读我们要使用的Capacitor API的文档。 我们看一下Capacitor的Camera API。

现在，让我们将此API很好地利用。 在您的Quasar项目的页面/布局/组件Vue文件之一中，我们编写：

// 一些Vue文件
// 记住这只是一个例子；
// 仅查看我们如何使用插件页面中描述的API；
// 这里的其他事情都不重要

<template>
  <div>
    <q-btn color="primary" label="Get Picture" @click="captureImage" />

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

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

export default {
  setup () {
    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
    }

    return {
      imageSrc,
      captureImage
    }
  }
}
</script>

一些Capacitor插件，如Camera，在不以本地方式运行时，可以在标准的web浏览器中使用基于web的UI。要启用这些控件，请在项目中添加@ionic/pwa-elements：

$ npm install @ionic/pwa-elements

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

import { defineCustomElements } from '@ionic/pwa-elements/loader'

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

别忘了在quasar.config.js中调用启动脚本

boot: ['capacitor']

现在，您不仅可以在原生的Android或iOS中使用Camera API，还可以在SPA或PWA等基于web的项目中使用。

例子: 设备

第一步是阅读我们要使用的Capacitor API的文档。 我们看一下Capacitor的 Device API.

现在，让我们将此API很好地利用。 在您的Quasar项目的页面/布局/组件Vue文件之一中，我们编写：

// 一些Vue文件
// 记住这只是一个例子；
// 仅查看我们如何使用插件页面中描述的API；
// 这里的其他事情都不重要

<template>
  <div>
    <div>Model: {{ model }}</div>
    <div>Manufacturer: {{ manufacturer }}</div>
  </div>
</template>

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

export default {
  setup () {
    const model = ref('Please wait...')
    const manufacturer = ref('Please wait...')

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

    return {
      model,
      manufacturer
    }
  }
}
</script>