開發一個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開發 ─ 模擬器選擇及使用(四)