Quasar CLI with Vite - @quasar/app-vite

Cordova 插件

您可以使用 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>