你可以使用 Capacitor API 连接到原生设备 API。
¥You can hook into the native device APIs by using Capacitor APIs.
Capacitor API(Capacitor APIs)
此类 API 的一些示例：
¥A few examples of such APIs:
后台任务
¥Background Task
相机
¥Camera
控制台
¥Console
设备
¥Device
文件系统
¥Filesystem
地理位置
¥Geolocation
动作
¥Motion
网络
¥Network
推送通知
¥Push Notifications
分享
¥Share
启动画面
¥Splash Screen
状态栏
¥Status Bar
使用 Capacitor API(Using a Capacitor API)
¥Using a Capacitor API
让我们通过一些示例来学习，假设你已经在 Quasar 项目中添加了 Capacitor 模式。
¥Let’s learn by taking some examples, assuming you’ve added Capacitor mode to your Quasar project already.
示例：地理位置(Example: Geolocation)
¥Example: Geolocation
第一步是阅读我们要使用的 Capacitor API 的文档。我们查看 Capacitor 的 地理位置 API。
¥First step is to read the documentation of the Capacitor API that we want to use. We look at Capacitor’s Geolocation API.
现在让我们好好利用一下这个插件。在你的 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>
GPS position: <strong>{{ position }}</strong>
</div>
</template>
<script>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { Geolocation } from '@capacitor/geolocation'
export default {
setup () {
const position = ref('determining...')
function getCurrentPosition() {
Geolocation.getCurrentPosition().then(newPosition => {
console.log('Current', newPosition)
position.value = newPosition
})
}
let geoId
onMounted(() => {
getCurrentPosition()
// we start listening
geoId = Geolocation.watchPosition({}, (newPosition, err) => {
console.log('New GPS position')
position.value = newPosition
})
})
onBeforeUnmount(() => {
// we do cleanup
Geolocation.clearWatch(geoId)
})
return {
position
}
}
}
</script>示例：相机(Example: Camera)
¥Example: Camera
第一步是阅读我们要使用的 Capacitor API 的文档。我们查看 Capacitor 的 相机 API。
¥First step is to read the documentation of the Capacitor API that we want to use. We look at Capacitor’s Camera API.
现在让我们好好利用一下这个 API。在你的 Quasar 项目的 pages/layouts/components Vue 文件中，我们写入：
¥Now let’s put this API 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 { ref } from 'vue'
import { Camera, CameraResultType } from '@capacitor/camera'
export default {
setup () {
const imageSrc = ref('')
async function captureImage () {
const image = await Camera.getPhoto({
quality: 90,
allowEditing: true,
resultType: CameraResultType.Uri
})
// The result will vary on the value of the resultType option.
// CameraResultType.Uri - Get the result from image.webPath
// CameraResultType.Base64 - Get the result from image.base64String
// CameraResultType.DataUrl - Get the result from image.dataUrl
imageSrc.value = image.webPath
}
return {
imageSrc,
captureImage
}
}
}
</script>某些 Capacitor 插件（例如相机）在非原生运行，而是在标准 Web 浏览器中运行时，具有基于 Web 的 UI。要启用这些控件，请将 @ionic/pwa-elements 添加到你的项目：
¥Some Capacitor plugins, such as Camera, have a web-based UI available when not running natively but in a standard web browser. To enable these controls, add @ionic/pwa-elements to your project:
$ npm install @ionic/pwa-elements然后创建一个启动文件来初始化它们，例如 src/boot/capacitor.js：
¥Then create a boot file to initialize them, for example src/boot/capacitor.js:
import { defineCustomElements } from '@ionic/pwa-elements/loader'
export default () => {
defineCustomElements(window)
}不要忘记在 quasar.config 文件中调用启动脚本：
¥Don’t forget to call the boot script in the quasar.config file:
boot: ['capacitor']现在你不仅可以在原生 Android 或 iOS 中使用相机 API，还可以在基于 Web 的项目（如 SPA 或 PWA）中使用。
¥Now you are able to use the Camera API not just in native Android or iOS, but also in web based projects like a SPA or PWA.
示例：设备(Example: Device)
¥Example: Device
第一步是阅读我们要使用的 Capacitor API 的文档。查看电容器的 设备 API。
¥First step is to read the documentation of the Capacitor API that we want to use. Look at the Capacitor’s Device API.
现在让我们好好利用一下这个 API。在你的 Quasar 项目的 pages/layouts/components Vue 文件中，我们写入：
¥Now let’s put this API 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>
<div>Model: {{ model }}</div>
<div>Manufacturer: {{ manufacturer }}</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
import { Device } from '@capacitor/device'
export default {
setup () {
const model = ref('Please wait...')
const manufacturer = ref('Please wait...')
onMounted(() => {
Device.getInfo().then(info => {
model.value = info.model
manufacturer.value = info.manufacturer
})
})
return {
model,
manufacturer
}
}
}
</script>