Capacitor APIs | Quasar Framework

搭配 Webpack 的 Quasar CLI - @quasar/app-webpack

Capacitor API

您可以使用 Capacitor API 連接原生裝置 API。

Capacitor API

一些此類 API 的範例

背景任務
相機
主控台
裝置
檔案系統
地理位置
動作感應
網路
推播通知
分享
啟動畫面
狀態列

使用 Capacitor API

讓我們透過一些範例來學習，假設您已經將 Capacitor 模式新增至您的 Quasar 專案中。

範例：地理位置

第一步是閱讀我們想要使用的 Capacitor API 的文件。我們查看 Capacitor 的地理位置 API。

現在讓我們好好利用這個外掛程式。在您的 Quasar 專案的 pages/layouts/components 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 專案的 pages/layouts/components 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 外掛程式（例如 Camera）在非原生執行時但在標準 Web 瀏覽器中時，具有可用的 Web 介面。若要啟用這些控制項，請將 @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 專案的 pages/layouts/components 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. 範例：相機

3.3. 範例：裝置