您可以使用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 { Plugins } from '@capacitor/core'

const { Geolocation } = Plugins

export default {
  data () {
    return {
      position: 'determining...'
    }
  },
  methods: {
    getCurrentPosition() {
      Geolocation.getCurrentPosition().then(position => {
        console.log('Current', position);
        this.position = position
      });
    }
  },
  mounted () {
    this.getCurrentPosition()

    // 我们开始监听
    this.geoId = Geolocation.watchPosition({}, (position, err) => {
      console.log('New GPS position')
      this.position = position
    })
  },
  beforeDestroy () {
    // 我们做清理
    Geolocation.clearWatch(this.geoId)
  }
}
</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 { Plugins, CameraResultType } from '@capacitor/core'

const { Camera } = Plugins

export default {
  data () {
    return {
      imageSrc: ''
    }
  },
  methods: {
    async 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获取结果
      this.imageSrc = image.webPath
    }
  }
}
</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.conf.js中调用启动脚本

boot: ['capacitor']

现在，您不仅可以在nativ 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 { Plugins } from '@capacitor/core'

const { Device } = Plugins

export default {
  data () {
    return {
      model: 'Please wait...',
      manufacturer: 'Please wait...'
    }
  },
  mounted () {
    Device.getInfo().then(info => {
      this.model = info.model
      this.manufacturer = info.manufacturer
    })
  }
}
</script>