您可以通过使用 Cordova 插件 来挂钩到原生设备 API。
Cordova 插件
一些此类插件的示例
- 电池状态
- 相机
- 联系人
- 设备
- 设备运动
- 地理位置
- 媒体
- 媒体捕获
- 网络信息
- 启动画面
- 振动
- 状态栏
设备就绪事件
您会注意到，某些 Cordova 插件只有在触发 deviceready 事件后才能使用。我们不必太担心它。Quasar 侦听此事件，并确保我们的根 Vue 组件在此事件触发**之后**挂载。但是，如果您需要某些插件的自己的变量，并且该变量是在 deviceready 之后初始化的，则可以按照下面使用设备插件的示例进行操作
注意事项
以一个 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 命令。因此，我们在 /src-cordova（这是一个 Cordova 生成的文件夹）中执行“cd”命令，然后从那里发出安装命令
# 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 命令。因此，我们在 /src-cordova（这是一个 Cordova 生成的文件夹）中执行“cd”命令，然后从那里发出安装命令
# 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 命令。因此，我们在 /src-cordova（这是一个 Cordova 生成的文件夹）中执行“cd”命令，然后从那里发出安装命令
# from /src-cordova:
$ cordova plugin add cordova-plugin-device现在让我们将此插件投入使用。如果您需要在应用程序启动时获取设备信息，则必须捕获创建事件。在您的 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>