Cordova插件

Quasar CLI with Webpack - @quasar/app-webpack

Cordova插件

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

这样插件的几个例子：

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

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>