您可以使用 Cordova 插件 访问设备的原生 API。
Cordova 插件
一些示例插件：
- 电池状态
- 相机
- 联系人
- 设备
- 设备运动
- 地理位置
- 媒体
- 媒体捕捉
- 网络信息
- 启动画面
- 振动
- 状态栏
Deviceready 事件
您会注意到一些 Cordova 插件只有在 deviceready 事件被触发后才可用。我们不需要担心太多，Quasar 监听这个事件被触发之后才会挂载们的 Vue 根组件。但是如果您需要一些插件自己的变量并且在 deviceready 之后初始化您可以按照下面使用插件设备的例子
注意事项
使用一个 vue 文件来做示例：
<template> ... 我们确信'deviceready'已经触发了 ... </template>
<script>
// 在 export default 之外，我们需要为自己临听事件：
document.addEventListener(
"deviceready",
() => {
// 只有现在我们确信事件已触发
},
false,
);
export default {
// ... 我们确信'deviceready'已经触发了 ...
};
</script>原因很简单。Quasar 监听到 deviceready 事件之后挂载根 Vue 组件。但在此之前，Vue 文件被导入到 /src/router/routes.js 文件中，因此 export default 之外的代码会被提前执行。
使用一个 Cordova 插件
让我们通过一些例子来学习，假设您已经为 Quasar 项目添加了 Cordova 模式并已经安装了一个平台（android，ios，…）。
示例：电池管理
第一步是阅读我们想要使用的 Cordova 插件的文档。 我们看 Cordova 插件列表 并点击 Battery Status doc page。
我们看到有关如何安装此插件的说明。它总是一个 Cordova 的命令。因此，我们将 “cd” 进入/src-cordova（这是 Cordova 生成的文件夹）并在那里运行安装命令：
# 在/src-cordova 中:
$ cordova plugin add cordova-plugin-battery-status现在让我们把这个插件用起来。在您的 Quasar 项目中 pages/layouts/components 目录下的一个 Vue 文件中，我们编写：
// 某个 Vue 文件 // 记住这只是一个例子; // 仅查看我们如何使用插件页面中描述的 API; //
这里其余的东西并不重要
<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}`;
}
// 我们需要注册事件, 参考插件的文档页面
window.addEventListener("batterystatus", updateBatteryStatus, false);
onBeforeUnmount(() => {
// 我们做一些清理工作;
// 我们需要删除事件监听器
window.removeEventListener("batterystatus", updateBatteryStatus, false);
});
return {
batteryStatus,
};
},
};
</script>示例：相机
第一步是阅读我们想要使用的 Cordova 插件的文档。 我们看 Cordova 插件列表 并点击 Camera doc page。
有提及 deviceready 事件。 但是我们已经从前面的章节中知道如何处理它。
我们看到有关如何安装此插件的说明。它总是一个 Cordova 的命令。因此，我们将 “cd” 进入/src-cordova（这是 Cordova 生成的文件夹）并在那里运行安装命令：
# 在/src-cordova 中:
$ cordova plugin add cordova-plugin-camera现在让我们把这个插件用起来。在您的 Quasar 项目中 pages/layouts/components 目录下的一个 Vue 文件中，我们编写：
// 某个 Vue 文件 // 记住这只是一个例子; // 仅查看我们如何使用插件页面中描述的 API; //
这里其余的东西并不重要
<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 doc page。
这个插件初始化了一个名为 device 的全局变量，它描述了设备的硬件和软件信息。因此可以使用 window.device 访问它。
我们看到有关如何安装此插件的说明。它总是一个 Cordova 的命令。因此，我们将 “cd” 进入/src-cordova（这是 Cordova 生成的文件夹）并在那里运行安装命令：
# 在/src-cordova 中:
$ cordova plugin add cordova-plugin-device现在让我们把这个插件用起来。在您的 Quasar 项目中 pages/layouts/components 目录下的一个 Vue 文件中，我们编写：
// 某个 Vue 文件 // 记住这只是一个例子; // 仅查看我们如何使用插件页面中描述的 API; //
这里其余的东西并不重要
<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>