当前位置：首页 > news >正文

#跟着若城学鸿蒙# web篇-运动和方向传感器监测

news 来源：原创 2025/5/17 11:13:10

前言

有些前端业务场景需要用到一些传感器，比如运动传感器和方向传感器来实现摇一摇功能。这就需要前端能够直接获取到相关数据，而不是通过 js 调用客户端代码来实现。

权限

还是需要在模块的module.json5文件中添加相关权限

      {"name" : "ohos.permission.ACCELEROMETER" // 加速度权限},{"name" : "ohos.permission.GYROSCOPE"     // 陀螺仪权限}

由于不是敏感权限，添加后就可以使用，不用进行动态申请。

web组件

在 web 组件中我们需要通过onPermissionRequest方法来获取前端要请求的权限，并且根据用户的选择来判断是否可以授权

 //权限申请.onPermissionRequest((event)=>{console.error("web申请权限",event.request.getAccessibleResource())AlertDialog.show({title: '权限申请',message: event.request.getAccessibleResource().toString(),primaryButton: {value: '拒绝',action: () => {event.request.deny();}},secondaryButton: {value: '允许',action: () => {event.request.grant(event.request.getAccessibleResource());}},autoCancel: false,cancel: () => {event.request.deny();}})})

需要注意的是，这里的event.request.getAccessibleResource()返回一个字符串数组，我们可以通过每一项的值来判断需要是否需要动态申请权限。这里示例中只有运动和方向传感器，因此就直接弹窗询问用户是否可以授权，并且在用户授权后直接通知前端可以使用，不需要进行动态权限申请。

前端

前端页面就比较简单了，按照 w3c标准来就行了


<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8" /><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><meta name="misapplication-tap-highlight" content="no" /><meta name="HandheldFriendly" content="true" /><meta name="MobileOptimized" content="320" /><title>运动和方向传感器</title><meta charset="UTF-8"><style>body {font-family: Arial, sans-serif;}</style><script type="text/javascript">// 访问设备的加速度计传感器，并获取其数据。function getAccelerometer() {var acc = new Accelerometer({frequency: 60});acc.addEventListener('activate', () => console.log('Ready to measure.'));acc.addEventListener('error', error => console.log('Error type: ' + error.type + ', error: ' + error.error ));acc.addEventListener('reading', () => {console.log(`Accelerometer ${acc.timestamp}, ${acc.x}, ${acc.y}, ${acc.z}.`);});acc.start();}// 访问设备的陀螺仪传感器，并获取其数据。function getGyroscope() {var gyr = new Gyroscope({frequency: 60});gyr.addEventListener('activate', () => console.log('Ready to measure.'));gyr.addEventListener('error', error => console.log('Error type: ' + error.type + ', error: ' + error.error ));gyr.addEventListener('reading', () => {console.log(`Gyroscope ${gyr.timestamp}, ${gyr.x}, ${gyr.y}, ${gyr.z}.`);});gyr.start();}// 访问设备的方向传感器，并获取其数据。function getAbsoluteOrientationSensor() {var aos = new AbsoluteOrientationSensor({frequency: 60});aos.addEventListener('activate', () => console.log('Ready to measure.'));aos.addEventListener('error', error => console.log('Error type: ' + error.type + ', error: ' + error.error ));aos.addEventListener('reading', () => {console.log(`AbsoluteOrientationSensor data: ${aos.timestamp}, ${aos.quaternion}`);});aos.start();}// 监听设备的运动事件，并执行相应的处理逻辑。function listenDeviceMotionEvent() {removeDeviceMotionEvent();if ('DeviceMotionEvent' in window) {window.addEventListener('devicemotion', handleMotionEvent, false);} else {console.log('不支持DeviceMotionEvent');}}// 移除之前添加的设备运动事件监听器。function removeDeviceMotionEvent() {if ('DeviceMotionEvent' in window) {window.removeEventListener('devicemotion', handleMotionEvent, false);} else {console.log('不支持DeviceOrientationEvent');}}// 处理运动事件。function handleMotionEvent(event) {const x = event.accelerationIncludingGravity.x;const y = event.accelerationIncludingGravity.y;const z = event.accelerationIncludingGravity.z;console.log(`DeviceMotionEvent data: ${event.timeStamp}, ${x}, ${y}, ${z}`);}// 监听设备方向的变化，并执行相应的处理逻辑。function listenDeviceOrientationEvent() {removeDeviceOrientationEvent();if ('DeviceOrientationEvent' in window) {window.addEventListener('deviceorientation', handleOrientationEvent, false);} else {console.log('不支持DeviceOrientationEvent');}}// 移除之前添加的设备方向事件监听器。function removeDeviceOrientationEvent() {if ('DeviceOrientationEvent' in window) {window.removeEventListener('deviceorientation', handleOrientationEvent, false);} else {console.log('不支持DeviceOrientationEvent');}}// 监听设备方向的变化，并执行相应的处理逻辑。function listenDeviceOrientationEvent2() {removeDeviceOrientationEvent2();if ('DeviceOrientationEvent' in window) {window.addEventListener('deviceorientationabsolute', handleOrientationEvent, false);} else {console.log('不支持DeviceOrientationEvent');}}// 移除之前添加的设备方向事件监听器。function removeDeviceOrientationEvent2() {if ('DeviceOrientationEvent' in window) {window.removeEventListener('deviceorientationabsolute', handleOrientationEvent, false);} else {console.log('不支持DeviceOrientationEvent');}}// 处理方向事件。function handleOrientationEvent(event) {console.log(`DeviceOrientationEvent data: ${event.timeStamp}, ${event.absolute}, ${event.alpha}, ${event.beta}, ${event.gamma}`);}</script>
</head>
<body>
<div id="dcontent" class="dcontent"><h3>运动和方向:</h3><ul class="dlist"><li><button type="button" onclick="getAccelerometer()">加速度</button></li><li><button type="button" onclick="getGyroscope()">陀螺仪</button></li><li><button type="button" onclick="getAbsoluteOrientationSensor()">设备方向(绝对定位)</button></li><li><button type="button" onclick="listenDeviceMotionEvent()">设备运动事件</button></li><li><button type="button" onclick="listenDeviceOrientationEvent()">设备方向事件</button></li><li><button type="button" onclick="listenDeviceOrientationEvent2()">设备方向事件(绝对定位)</button></li></ul>
</div>
</body>
</html>