uniapp 如何监听手机抖动实现摇一摇功能

在uniapp中如何实现监听手机抖动的功能？我想做一个类似微信摇一摇的效果，但不知道该怎么监听设备的加速度变化。请问需要用到哪个API？能否提供一个简单的代码示例？还需要注意哪些兼容性问题？

2 回复

在uniapp中，监听手机抖动可使用uni.onAccelerometerChange监听加速度变化。在回调函数中判断加速度变化幅度，超过阈值则触发摇一摇事件。记得先调用uni.startAccelerometer开启监听，使用完毕后调用uni.stopAccelerometer停止。


在 UniApp 中，可以通过监听设备的加速度传感器事件来实现手机摇一摇功能。以下是具体实现步骤和代码示例：

实现步骤

  1. 监听加速度数据：使用 uni.onAccelerometerChange 监听加速度变化。
  2. 设置摇一摇阈值：通过判断加速度变化幅度是否超过阈值来触发摇动事件。
  3. 防抖处理：避免短时间内重复触发。

示例代码

export default {
  data() {
    return {
      shakeThreshold: 15, // 摇一摇阈值，可根据需求调整
      lastX: 0,
      lastY: 0,
      lastZ: 0,
      shakeTimer: null
    }
  },
  onLoad() {
    this.startShakeListener();
  },
  onUnload() {
    this.stopShakeListener();
  },
  methods: {
    startShakeListener() {
      // 开始监听加速度数据
      uni.onAccelerometerChange(this.handleShake);
    },
    stopShakeListener() {
      // 停止监听
      uni.offAccelerometerChange(this.handleShake);
    },
    handleShake(res) {
      const { x, y, z } = res;
      const speed = Math.abs(x + y + z - this.lastX - this.lastY - this.lastZ) / 100 * 10000;
      
      if (speed > this.shakeThreshold) {
        clearTimeout(this.shakeTimer);
        this.shakeTimer = setTimeout(() => {
          // 触发摇一摇事件
          this.onShakeSuccess();
        }, 300);
      }
      
      // 更新上一次的加速度数据
      this.lastX = x;
      this.lastY = y;
      this.lastZ = z;
    },
    onShakeSuccess() {
      // 摇一摇成功后的处理逻辑
      uni.vibrateShort(); // 短振动反馈
      uni.showToast({
        title: '摇一摇成功！',
        icon: 'none'
      });
      
      // 这里可以执行其他业务逻辑，如抽奖、刷新数据等
      console.log('摇一摇触发');
    }
  }
}

注意事项

  1. 权限配置：在部分安卓设备上可能需要振动权限，可在 manifest.json 中添加：
    "permission": {
  "scope.vibrate": {
    "desc": "用于摇一摇振动反馈"
  }
}
  2. 平台差异：iOS 和 Android 的加速度传感器数据可能略有差异，建议真机测试调整阈值。
  3. 性能优化：页面不可见时可停止监听以节省资源。

通过以上代码即可在 UniApp 中实现基础的摇一摇功能。

回到顶部