uni-app加速计,罗盘,陀螺仪 接口API:
在这里插入图片描述

参考代码:

<template>
	<view>
		<text>加速计</text>
		<text class="acc_show">X:{{acc_x}}</text>
		<text class="acc_show">Y:{{acc_y}}</text>
		<text class="acc_show">Z:{{acc_z}}</text>
		<button size="default" type="default" @click="accelerometerStart()">加速计-启动</button>
		<button size="default" type="default" @click="accelerometerStop()">加速计-停止</button>
		
		<text>罗盘</text>
		<text>方向角度:{{cmp_direction}}</text>
		<button size="default" type="default" @click="compassStart()">罗盘-启动</button>
		<button size="default" type="default" @click="compassStop()">罗盘-停止</button>
		
		<text>陀螺仪</text>
		<text>X:{{gyr_x}}</text>
		<text>Y:{{gyr_y}}</text>
		<text>Z:{{gyr_z}}</text>
		<button size="default" type="default" @click="gyroscopeStart()">陀螺仪-启动</button>
		<button size="default" type="default" @click="gyroscopeStop()">陀螺仪-停止</button>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				acc_x: 0.0,
				acc_y: 0.0,
				acc_z: 0.0,
				
				cmp_direction: 0.0, // 0度:正北,90度:正东,180度:正南,270度:正西
				
				gyr_x: 0.0,
				gyr_y: 0.0,
				gyr_z: 0.0,
			}
		},
		onReady() {
			
		},
		methods:{
			// 加速计 
			accelerometerStart() {
				uni.onAccelerometerChange((res) => {
					this.acc_x = res.x.toFixed(3);
					this.acc_y = res.y.toFixed(3);
					this.acc_z = res.z.toFixed(3);
				}),
				uni.startAccelerometer({
					interval:'ui',	// 'game','normal','ui'
				}),
				uni.showToast({
					title:'加速计启动',
					icon:'success'
				})
			},
			accelerometerStop() {
				uni.offAccelerometerChange(function(res){
					console.log('加速计取消监听');
				}),
				uni.stopAccelerometer(),
				uni.showToast({
					title:'加速计停止',
					icon:'error'
				})
			},
			
			// 罗盘
			compassStart(res){
				uni.onCompassChange((res)=>{
					this.cmp_direction = parseInt(res.direction)
				}),
				uni.startCompass(),
				uni.showToast({
					title:'罗盘启动',
					icon:'success'
				})
			},
			compassStop(res){
				uni.stopCompass()
			},
			
			// 陀螺仪
			gyroscopeStart() {
				uni.onGyroscopeChange((res)=>{
					this.gyr_x = res.x.toFixed(2);
					this.gyr_y = res.y.toFixed(2);
					this.gyr_z = res.z.toFixed(2);
				}),
				uni.startGyroscope({
					interval:'ui'
				})
			},
			gyroscopeStop() {
				uni.stopGyroscope()
			}
				
		}
	}
</script>

<style>
	.text-area .acc_show {
		display: flex;
		width: auto;
		height: auto;
	}
</style>

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐