在此代码中，我有一个开始和一个停止按钮以及一个计时器。
我想从手机获取信息，例如 DeviceOrientationEvent 以及绝对、alpha、beta 和 gamma 等属性，如本链接所示。
我不知道该怎么做这样的事情，因为我从来没有使用过此类事件。
收到这些事件后，我会将它们保存在例如方向[]。
<template>
<q-page padding>
<div class="text-center text-h5 q-mt-lg">
{{ $t('tasks.motion.title') }}
</div>
<div class="row justify-center q-mt-lg">
<q-btn
@click="startTest"
v-show="!isStarted"
:label="$t('common.start')"
/>
<q-btn
@click="completeTest"
v-show="isStarted"
:label="$t('common.complete')"
/>
</div>
</q-page>
</template>
<script>
import phone from 'modules/phone'
import userinfo from 'modules/userinfo'
import { format as Qformat } from 'quasar'
const TEST_DURATION = 60
export default {
name: 'MotionOrientationPage',
props: {
sKey: String,
tId: Number
},
data: function () {
return {
isSignalCheck: true,
isStarted: false,
isCompleted: false,
timer: undefined,
totalTime: TEST_DURATION,
startedTS: undefined,
completionTS: undefined,
alpha: []
}
},
mounted: async function () {
// Events that are running always
if (window.DeviceMotionEvent) {
console.log('devicemotion was defined')
}
if (window.DeviceOrientationEvent) {
console.log('GyroScope was defined')
}
},
methods: {
async startTest () {
this.isStarted = true
this.startedTS = new Date()
this.startTimer()
phone.screen.forbidSleep()
if (this.isStarted && this.isCompleted === false) {
window.addEventListener('deviceorientation', function (event)
{
this.saveAlpha(event.alpha)
console.log(event.alpha)
})
}
},
saveAlpha (alpha) {
this.alpha.push(alpha)
},
startTimer () {
this.totalTime = TEST_DURATION
this.timer = setInterval(() => this.countDown(), 1000)
},
stopTimer () {
clearInterval(this.timer)
},
countDown () {
if (this.totalTime >= 1) {
this.totalTime--
} else {
this.completeTest()
}
},
completeTest () {
this.isStarted = false
this.completionTS = new Date()
this.stopTimer()
phone.screen.allowSleep()
this.isCompleted = true
// package the report
const sKey = this.sKey
const taskId = parseInt(this.taskId)
const userKey = userinfo.user._key
let report = {
userKey: userKey,
sKey: sKey,
taskId: taskId,
createdTS: new Date(),
startedTS: this.startedTS,
completionTS: this.completionTS,
alpha: this.alpha
}
this.$router.push({ name: 'reportMotionOrientation', params: { report: report } })
}
},
computed: {
minutes () {
return Qformat.pad(Math.floor(this.totalTime / 60))
},
seconds () {
return Qformat.pad(this.totalTime - (this.minutes * 60))
}
},
beforeDestroy: function () {
this.stopTimer()
phone.screen.allowSleep()
}
}
</script>
编辑：使用代码，每当我模仿开发工具中传感器选项卡中alpha值的变化时，我都会收到 Uncaught TypeError: this.saveAlpha is not a function at eval (file1.vue?149e:95) 。
我个人没有这样做过，但看起来您需要添加一个侦听器，然后使用一种或多种方法来保存事件中的新数据。
data() { return { ..., alpha: [] } }, mounted: { window.addEventListener('deviceorientation', function(event) { this.saveAlpha(event.alpha) }); // more event listeners }, methods: { saveAlpha(alpha) { this.alpha.push(alpha) }, // more saveMethods }评论更新：
... data() { return { continue: "false" { }, methods: { ... listener() { if(this.continue) { window.addEventListener('deviceorientation', function(event) { this.saveAlpha(event.alpha) }); // more event listeners } } }然后在您的组件中，确保
@click=listener。您需要添加一些逻辑来围绕该方法开始/停止捕获。您可以使用按钮翻转continue属性。