当前位置：首页 > uni-app

uniapp实现摇一摇

2026-03-26 14:23:28uni-app

实现摇一摇功能的核心步骤

监听设备加速度变化
通过uni.onAccelerometerChangeAPI监听设备加速度变化。当用户摇晃手机时，加速度传感器会触发回调函数，返回x、y、z三个方向的加速度值。

判断摇晃阈值
设定一个加速度变化的阈值（如1.5g）。当任意方向的加速度变化超过阈值时，认为用户执行了摇一摇动作。可通过计算三个方向加速度的矢量和来判断：

$$ \sqrt{x^2 + y^2 + z^2} > threshold $$

防抖处理
避免短时间内多次触发，需设置时间间隔（如1秒）。通过记录最后一次触发时间，与当前时间对比实现防抖。

代码实现示例

// 在页面中监听加速度变化
export default {
  data() {
    return {
      lastShakeTime: 0,
      shakeThreshold: 15 // 根据实际需求调整阈值
    }
  },
  onLoad() {
    this.startShakeListener()
  },
  onUnload() {
    this.stopShakeListener()
  },
  methods: {
    startShakeListener() {
      uni.onAccelerometerChange((res) => {
        const { x, y, z } = res
        const acceleration = Math.sqrt(x * x + y * y + z * z)

        if (acceleration > this.shakeThreshold) {
          const currentTime = Date.now()
          if (currentTime - this.lastShakeTime > 1000) { // 1秒内防抖
            this.lastShakeTime = currentTime
            this.handleShake()
          }
        }
      })
    },

    stopShakeListener() {
      uni.stopAccelerometerChange()
    },

    handleShake() {
      uni.showToast({
        title: '摇一摇成功',
        icon: 'none'
      })
      // 执行摇一摇后的业务逻辑
    }
  }
}

注意事项

权限配置
在manifest.json中需要添加加速度计权限声明（仅Android需要）：

"permission": {
  "android.permission.ACCESS_COARSE_LOCATION": {}
}

iOS兼容性
iOS 13+需要用户授权运动与健身权限。可在App.vue的onLaunch中添加：

uni.authorize({
  scope: 'scope.motion',
  success() { console.log('授权成功') }
})

性能优化
长时间监听会影响电池寿命，建议在页面不可见时（如onHide）停止监听，可见时（如onShow）重新开启。

扩展功能

振动反馈
摇动成功后可通过uni.vibrate提供触觉反馈：

uni.vibrate({
  type: 'medium' // iOS可选light/medium/heavy
})

自定义动画
结合CSS动画实现摇动UI效果，例如：

uniapp实现摇一摇

.shake-animation {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
  10%, 90% { transform: translateX(-1px) }
  20%, 80% { transform: translateX(2px) }
  30%, 50%, 70% { transform: translateX(-4px) }
  40%, 60% { transform: translateX(4px) }
}