Quasar CLI with Webpack - @quasar/app-webpack
Cordova插件

您可以使用Cordova插件连接原生设备API。

Cordova插件

这样插件的几个例子:

  • 电池状态
  • 相机
  • 联系人
  • 设备
  • 设备运动
  • 地理位置
  • 媒体
  • 媒体捕捉
  • 网络信息
  • 飞溅屏幕
  • 振动
  • 状态栏

Deviceready事件

你会注意到一些Cordova插件只有在deviceready事件被触发后才可用。 我们不需要担心太多。 在这个事件被触发之后,Quasar监听这个事件并且处理我们的根Vue组件。但是如果你需要一些插件自己的变量并且在deviceready之后初始化你可以按照下面使用插件设备的例子

注意事项

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

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

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

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

原因很简单。 Quasar监听事件,然后挂载根Vue组件。 但在此之前,Vue文件被导入到/src/router/routes.js文件中,因此默认导出之外的代码被执行。

使用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生成的文件夹)并在那里发出安装命令

# from /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 => { // 如果成功
          imageSrc.value = `data:image/jpeg;base64,${data}`
        },
        () => { // 如果失败
          $q.notify('Could not access device camera.')
        },
        {
          // 相机选项
        }
      )
    }

    return {
      imageSrc,
      captureImage
    }
  }
}
</script>

示例:设备

第一步是阅读我们想要使用的Cordova插件的文档。看看Cordova插件列表,然后单击Device doc page

这个插件初始化一个名为device的全局变量,它描述了设备的硬件和软件。因此可以使用window.device访问它。

阅读有关如何在其cordova doc页面上安装此插件的说明。它始终是Cordova命令。 所以我们“cd”到/src-cordova(这是一个Cordova生成的文件夹)并从那里发出install命令

#在/src-cordova目录:
$ cordova plugin add cordova-plugin-device

现在让我们把这个插件用于一些很好的用途。如果在启动应用程序时需要设备的信息,则必须捕获创建的事件。在你的一个Quasar项目的页面/布局/组件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>