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

Huang兄

8人浏览 · 2025-05-16 14:53:42

Huang兄 · 2025-05-16 14:53:42 发布

前言

有些前端业务场景需要用到一些传感器，比如运动传感器和方向传感器来实现摇一摇功能。这就需要前端能够直接获取到相关数据，而不是通过 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>