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

版权声明：本文为博主原创文章，如需转载，请注明出处！原文地址： https://blog.csdn.net/liub37/article/details/83901443

开发一个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 = `电量: ${status.level}%, 充电状态: ${status.isPlugged}`
}

相机

template中

<div>
      <q-btn color="primary"
        label="Get Picture"
        @click="captureImage" />
      <div>
        <img :src="imageSrc"
          width="200">
      </div>
    </div>

data中

imageSrc: ''

methods中

captureImage() {
  navigator.camera.getPicture(
    data => { // 如果成功
      console.log(data)
      this.imageSrc = `data:image/jpeg;base64,${data}`
    },
    () => { // 如果失败
      this.$q.notify('Could not access device camera.')
    },
    {
      // 相机选项
      destinationType: Camera.DestinationType.DATA_URL//返回base64格式
    }
  )
}

完整代码

<template>
  <q-page class="flex flex-center">
    <img alt="Quasar logo"
      src="~assets/quasar-logo-full.svg">
    <div>
      电池状况: <strong>{{ batteryStatus }}</strong>
    </div>
    <div>
      <q-btn color="primary"
        label="Get Picture"
        @click="captureImage" />
      <div>
        <img :src="imageSrc"
          width="200">
      </div>
    </div>
  </q-page>
</template>

<style>
</style>

<script>
export default {
  name: 'PageIndex',
  data() {
    return {
      batteryStatus: 'determining...',
      imageSrc: ''
    }
  },
  methods: {
updateBatteryStatus(status) {
  console.log(status)
  this.batteryStatus = `电量: ${status.level}%, 充电状态: ${status.isPlugged}`
},
captureImage() {
  navigator.camera.getPicture(
    data => { // 如果成功
      console.log(data)
      this.imageSrc = `data:image/jpeg;base64,${data}`
    },
    () => { // 如果失败
      this.$q.notify('Could not access device camera.')
    },
    {
      // 相机选项
      destinationType: Camera.DestinationType.DATA_URL//返回base64格式
    }
  )
}
  },
  created() {
    // 我们注册事件, 参考插件的文档页面
    window.addEventListener('batterystatus', this.updateBatteryStatus, false)
  },
  beforeDestroy() {
    // 我们做一些清理工作;
    // 我们需要删除事件监听器
    window.removeEventListener('batterystatus', this.updateBatteryStatus, false)
  }
}
</script>

保存后将项目停止掉，重新执行quasar dev -m cordova -T android启动
然后就能看到下面的界面了，显示了当前手机的电量及充电状态，可以把USB拔了充电状态会显示false
GET PICTURE可以打开拍照界面

可以发现Cordova插件的使用非常简单，安装完成后就可以像平时写代码一样使用它，具体详细的使用可以参考插件的文档，这里只是简单的运用。
cordova-plugin-battery-status文档
cordova-plugin-camera文档

快速传送门

Vue + quasar-framework进行Vue混合app开发 ─ 环境准备(一)
Vue + quasar-framework进行Vue混合app开发 ─ Cordova插件调用(二)
Vue + quasar-framework进行Vue混合app开发 ─ App真机调试(三)
Vue + quasar-framework进行Vue混合app开发 ─ 模拟器选择及使用(四)