电容 API | Quasar 框架

Quasar CLI 与 Webpack - @quasar/app-webpack

Capacitor API

您可以通过使用Capacitor API挂接到原生设备 API。

Capacitor API

一些此类 API 的示例

后台任务
相机
控制台
设备
文件系统
地理位置
运动
网络
推送通知
分享
启动画面
状态栏

使用 Capacitor API

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

示例：地理位置

第一步是阅读我们要使用的 Capacitor API 的文档。我们查看 Capacitor 的地理位置 API。

现在让我们将此插件用于某些用途。在您的 Quasar 项目的页面/布局/组件 Vue 文件之一中，我们编写

// some Vue file
// remember this is simply an example;
// only look at how we use the API described in the plugin's page;
// the rest of things here are of no importance

<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()

      // we start listening
      geoId = Geolocation.watchPosition({}, (newPosition, err) => {
        console.log('New GPS position')
        position.value = newPosition
      })
    })

    onBeforeUnmount(() => {
      // we do cleanup
      Geolocation.clearWatch(geoId)
    })

    return {
      position
    }
  }
}
</script>

示例：相机

第一步是阅读我们要使用的 Capacitor API 的文档。我们查看 Capacitor 的相机 API。

现在让我们将此 API 用于某些用途。在您的 Quasar 项目的页面/布局/组件 Vue 文件之一中，我们编写

// some Vue file
// remember this is simply an example;
// only look at how we use the API described in the plugin's page;
// the rest of things here are of no importance

<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
      })

      // The result will vary on the value of the resultType option.
      // CameraResultType.Uri - Get the result from image.webPath
      // CameraResultType.Base64 - Get the result from image.base64String
      // CameraResultType.DataUrl - Get the result from image.dataUrl
      imageSrc.value = image.webPath
    }

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

某些 Capacitor 插件（例如相机）在非原生运行时但在标准 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 文件中调用引导脚本

boot: ['capacitor']

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

示例：设备

第一步是阅读我们要使用的 Capacitor API 的文档。查看 Capacitor 的设备 API。

现在让我们将此 API 用于某些用途。在您的 Quasar 项目的页面/布局/组件 Vue 文件之一中，我们编写

// some Vue file
// remember this is simply an example;
// only look at how we use the API described in the plugin's page;
// the rest of things here are of no importance

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

发现错误？在浏览器中编辑此页面

1. 简介

2. Capacitor API

3. 使用 Capacitor API

3.1. 示例：地理位置

3.2. 示例：相机