Vue + quasar-framework进行Vue混合app开发 ─ Cordova插件调用(二)

开发一个App，怎么能不调用原生的api接口呢，在Quasar中我们可以直接安装并使用Cordova插件调用原生设备API，比如获取设备信息，网络信息，调用摄像头等等。
Cordova插件只有在deviceready事件被触发后才可用。 我们不需要担心太多。 在这个事件被触发之后，Quasar监听这个事件并且处理我们的根Vue组件。但是如果你需要一些插件自己的变量并且在deviceready之后初始化你可以按照下面使用插件设备的例子

使用一个vue文件来做说明：

<template>
  ... 我们确信'deviceready'已经触发了 ...
</template>

<script>
// 在默认导出之外，
// 我们需要为自己临听事件：
document.addEventListener('deviceready', () => {
   
  // 只有现在我们确信
  // 事件已触发
}, false)

export default {
   
  // 我们确信'deviceready'已经触发了
}
</script>

下面提供2个小例子来说明

• 获取手机的电池状态
• 相机
  先进入src-cordova目录输入下面的命令来安装这2个插件

#Cordova电池插件
cordova plugin add cordova-plugin-battery-status

#Cordova相机插件
cordova plugin add cordova-plugin-camera

安装完毕

获取手机的电池状态

找到src\pages\Index.vue，写入以下代码
template中

<div>
      电池状况: <strong>{
  { batteryStatus }}</strong>
</div>

data中

batteryStatus: 'determining...'

methods中

updateBatteryStatus(status) {
   
  console.log(status)
  this.batteryStatus