Capacitor APIs

您可以使用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
      })
      // image.webPath将包含一个可以设置为图像src的路径。
      // 您可以使用image.path访问原始文件,
      // 如果需要,可以将其传递到Filesystem API以读取图像的原始数据
      //(或将resultType:CameraResultType.Base64传递给getPhoto)
      this.imageSrc = image.webPath
    }
  }
}
</script>

例子: 设备

第一步是阅读我们要使用的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>