您可以使用 Cordova 插件 來連結原生裝置 API。
Cordova 插件
一些此類插件的範例
- 電池狀態
- 相機
- 聯絡人
- 裝置
- 裝置動作感應
- 地理位置
- 媒體
- 媒體擷取
- 網路資訊
- 啟動畫面
- 震動
- 狀態列
Deviceready 事件
您會注意到某些 Cordova 插件僅在 deviceready 事件觸發後才能使用。我們不需要太過擔心。Quasar 會監聽此事件，並在 此事件觸發後 處理我們根 Vue 元件的掛載。但是，如果您需要某些插件自己的變數，並且該變數是在 deviceready 之後初始化的，您可以依照下方使用 device 插件的範例
注意事項
讓我們以一個 vue 檔案為例
<template>
... we are sure 'deviceready' has been triggered here ...
</template>
<script>
// outside of the default export,
// we need to listen to the event for ourselves:
document.addEventListener('deviceready', () => {
// it's only now that we are sure
// the event has triggered
}, false)
export default {
// we are sure 'deviceready' has been triggered here
}
</script>原因很簡單。Quasar 監聽事件，然後掛載根 Vue 元件。但在這之前，Vue 檔案會被匯入到 /src/router/routes.js 檔案中，因此預設匯出之外的程式碼會被執行。
使用 Cordova 插件
讓我們透過一些範例來學習，假設您已將 Cordova 模式新增至您的 Quasar 專案，並已安裝平台 (android、ios、…)。
範例：電池狀態
第一步是閱讀我們想要使用的 Cordova 插件的文件。我們查看 Cordova 插件列表，然後點擊 電池狀態文件頁面。
我們會看到關於如何安裝此插件的說明。這始終是一個 Cordova 命令。因此我們「cd」進入 /src-cordova (這是 Cordova 產生的資料夾)，並從那裡發出安裝命令
# from /src-cordova:
$ cordova plugin add cordova-plugin-battery-status現在讓我們充分利用這個插件。在您的 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>
Battery status is: <strong>{{ batteryStatus }}</strong>
</div>
</template>
<script>
import { ref, onBeforeUnmount } from 'vue'
export default {
setup () {
const batteryStatus = ref('determining...')
function updateBatteryStatus (status) {
batteryStatus.value = `Level: ${status.level}, plugged: ${status.isPlugged}`
}
// we register the event like on plugin's doc page
window.addEventListener('batterystatus', updateBatteryStatus, false)
onBeforeUnmount(() => {
// we do some cleanup;
// we need to remove the event listener
window.removeEventListener('batterystatus', updateBatteryStatus, false)
})
return {
batteryStatus
}
}
}
</script>範例：相機
第一步是閱讀我們想要使用的 Cordova 插件的文件。我們查看 Cordova 插件列表，然後點擊 相機文件頁面。
其中提到了 deviceready 事件。但我們已經從前面的章節中了解如何處理它。
我們閱讀關於如何安裝此插件的說明。這始終是一個 Cordova 命令。因此我們「cd」進入 /src-cordova (這是 Cordova 產生的資料夾)，並從那裡發出安裝命令
# from /src-cordova:
$ cordova plugin add cordova-plugin-camera現在讓我們充分利用這個插件。在您的 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 { useQuasar } from 'quasar'
import { ref } from 'vue'
export default {
setup () {
const $q = useQuasar()
const imageSrc = ref('')
function captureImage () {
navigator.camera.getPicture(
data => { // on success
imageSrc.value = `data:image/jpeg;base64,${data}`
},
() => { // on fail
$q.notify('Could not access device camera.')
},
{
// camera options
}
)
}
return {
imageSrc,
captureImage
}
}
}
</script>範例：裝置
第一步是閱讀我們想要使用的 Cordova 插件的文件。查看 Cordova 插件列表，然後點擊 裝置文件頁面。
這個插件初始化一個名為 device 的全域變數，它描述了裝置的硬體和軟體。因此可以使用 window.device 存取它。
閱讀其 cordova 文件頁面上關於如何安裝此插件的說明。這始終是一個 Cordova 命令。因此我們「cd」進入 /src-cordova (這是 Cordova 產生的資料夾)，並從那裡發出安裝命令
# from /src-cordova:
$ cordova plugin add cordova-plugin-device現在讓我們充分利用這個插件。如果您需要在啟動應用程式時取得裝置的資訊，您將必須捕獲 created 事件。在您的 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-page class="flex flex-center">
<div>IMEI: {{ imei }}</div>
</q-page>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup () {
const imei = ref(
window.device === void 0
? 'Run this on a mobile/tablet device'
: window.device
)
return {
imei
}
}
}
</script>