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

¥You can hook into the native device APIs by using Cordova Plugins.

Cordova 插件(Cordova Plugins)

¥Cordova Plugins

此类插件的一些示例：

¥A few examples of such plugins:

• 电池状态

  ¥Battery Status

• 相机

  ¥Camera

• 联系人

  ¥Contacts

• 设备

  ¥Device

• 设备运动

  ¥Device Motion

• 地理位置

  ¥Geolocation

• 媒体

  ¥Media

• 媒体捕获

  ¥Media Capture

• 网络信息

  ¥Network Information

• 启动画面

  ¥Splashscreen

• 振动

  ¥Vibration

• 状态栏

  ¥Statusbar

Deviceready 事件(Deviceready Event)

¥Deviceready Event

你会注意到，某些 Cordova 插件只有在触发 deviceready 事件后才可用。我们不需要太担心。Quasar 监听此事件，并负责在触发此事件后挂载我们的根 Vue 组件。如果你需要一些插件自己的变量，并且在 deviceready 之后初始化，你可以按照下面使用插件设备的示例进行操作。

¥You’ll notice that some Cordova plugins are usable only after the deviceready event has been triggered. We don’t need to worry about it too much. Quasar listens to this event and takes care of our root Vue component to be mounted after this event has been triggered. But if you need some plugin’s own variable and that is initialized after deviceready you can follow the example of using the plugin device below

注意事项(Caveat)

¥Caveat

让我们以一个 Vue 文件为例：

¥Let’s take a vue file for example:

<template>
  ... we are sure 'deviceready' has been triggered here ...
</template>

<script>
// outside of the default export,
// we need to listen to the event for ourselves:
document.addEventListener('deviceready', () => {
  // it's only now that we are sure
  // the event has triggered
}, false)

export default {
  // we are sure 'deviceready' has been triggered here
}
</script>

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

¥The reason is simple. Quasar listens for the event then mounts the root Vue component. But before this, the Vue files are imported into the /src/router/routes.js file, so the code outside of the default export gets executed.

使用 Cordova 插件(Using a Cordova Plugin)

¥Using a Cordova Plugin

让我们通过一些示例来学习，假设你已将 Cordova 模式添加到你的 Quasar 项目并安装了平台（Android、iOS 等）。

¥Let’s learn by taking some examples, assuming you’ve added Cordova mode to your Quasar project and installed a platform (android, ios, …) already.

示例：电池状态(Example: Battery Status)

¥Example: Battery Status

第一步是阅读我们要使用的 Cordova 插件的文档。我们查看 Cordova 插件列表 并点击 电池状态文档页面。

¥First step is to read the documentation of the Cordova plugin that we want to use. We look at Cordova Plugins list and click on Battery Status doc page.

我们查看了此插件的安装说明。它始终是一个 Cordova 命令。所以我们将 “cd” 放入 /src-cordova（Cordova 生成的文件夹），并从那里发出安装命令：

¥We see instructions on how to install this plugin. It’s always a Cordova command. So we “cd” into /src-cordova (which is a Cordova generated folder) and issue the install command form there:

# from /src-cordova:
$ cordova plugin add cordova-plugin-battery-status

现在让我们好好利用一下这个插件。在你的 Quasar 项目的 pages/layouts/components Vue 文件中，我们写入：

¥Now let’s put this plugin to some good use. In one of your Quasar project’s pages/layouts/components Vue file, we write:

// some Vue file
// remember this is simply an example;
// only look at how we use the API described in the plugin's page;
// the rest of things here are of no importance

<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}`
    }

    // we register the event like on plugin's doc page
    window.addEventListener('batterystatus', updateBatteryStatus, false)

    onBeforeUnmount(() => {
      // we do some cleanup;
      // we need to remove the event listener
      window.removeEventListener('batterystatus', updateBatteryStatus, false)
    })

    return {
      batteryStatus
    }
  }
}
</script>

示例：相机(Example: Camera)

¥Example: Camera

第一步是阅读我们要使用的 Cordova 插件的文档。我们查看 Cordova 插件列表 并点击 相机文档页面。

¥First step is to read the documentation of the Cordova plugin that we want to use. We look at Cordova Plugins list and click on Camera doc page.

其中提到了 deviceready 事件。但我们已经从前面的部分知道了如何处理它。

¥There’s a mention of the deviceready event. But we already know how to handle it from the previous sections.

我们仔细阅读了此插件的安装说明。它始终是一个 Cordova 命令。所以我们将 “cd” 放入 /src-cordova（Cordova 生成的文件夹），并从那里发出安装命令：

¥We read the instructions on how to install this plugin. It’s always a Cordova command. So we “cd” into /src-cordova (which is a Cordova generated folder) and issue the install command form there:

# from /src-cordova:
$ cordova plugin add cordova-plugin-camera

现在让我们好好利用一下这个插件。在你的 Quasar 项目的 pages/layouts/components Vue 文件中，我们写入：

¥Now let’s put this plugin to some good use. In one of your Quasar project’s pages/layouts/components Vue file, we write:

// some Vue file
// remember this is simply an example;
// only look at how we use the API described in the plugin's page;
// the rest of things here are of no importance

<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>

示例：设备(Example: Device)

¥Example: Device

第一步是阅读我们要使用的 Cordova 插件的文档。查看 Cordova 插件列表 并点击 设备文档页面。

¥First step is to read the documentation of the Cordova plugin that we want to use. Look at the Cordova Plugins list and click on Device doc page.

此插件初始化一个名为 device 的全局变量，用于描述设备的硬件和软件。这样才能使用 window.device 访问它。

¥This plugin initializes a global variable called device which describes the device’s hardware and software. So it can be accessed with window.device.

在 cordova 文档页面上阅读有关如何安装此插件的说明。它始终是一个 Cordova 命令。所以我们将 “cd” 放入 /src-cordova（Cordova 生成的文件夹），并从那里发出安装命令：

¥Read the instructions on how to install this plugin on its cordova doc page. It’s always a Cordova command. So we “cd” into /src-cordova (which is a Cordova generated folder) and issue the install command from there:

# from /src-cordova:
$ cordova plugin add cordova-plugin-device

现在让我们好好利用一下这个插件。如果你在启动应用时需要设备信息，则必须捕获 created 事件。在你的 Quasar 项目的 pages/layouts/components Vue 文件中，我们写入：

¥Now let’s put this plugin to some good use. If you need the information of your device when starting the application, you will have to capture the created event. In one of your Quasar project’s pages/layouts/components Vue file, we write:

// some Vue file
// remember this is simply an example;
// only look at how we use the API described in the plugin's page;
// the rest of things here are of no importance

<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>