Capacitor API

Quasar CLI 與 Vite - @quasar/app-vite

Capacitor API

您可以使用 Capacitor API 來連結原生裝置 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）在非原生執行，而是在標準網頁瀏覽器中執行時，具有可用的網頁 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，也可以在網頁專案（如 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. 範例：裝置