微信摇一摇H5监听devicemotion踩坑记录

1. 在微信H5内监听devicemotion事件，本地http协议起服务，无法在手机上监听到，不走回调，需要https协议，要么部署到服务器，要么本地起ng转成https，但是如果是局域网ip地址的话，微信内是无法直接打开的，一直很恶心。
2. android和ios系统也有区别，ios在ios版本13以上需要特殊处理，ios13以下直接忽略好了。ios13需要手动请求用户权限，在用户同意之后才能监听devicemotion事件。

const initDeviceMotion = () => {
  if (window.DeviceMotionEvent) {
    if (typeof DeviceMotionEvent.requestPermission === 'function') {
      // IOS 13
      DeviceMotionEvent.requestPermission()
        .then(permissionState => {
          if (permissionState === 'granted') {
            window.addEventListener('devicemotion', handleMotion)
          } else {
            // 如果是permissionState === 'denied'，就是没有权限
            // 需要提示用户，没有权限，要么重新发起，要么就这样了。
          }
        })
    } else {
      // android走这儿
      window.addEventListener('devicemotion', handleMotion)
    }
  } else {
    // 浏览器不支持DeviceMotionEvent事件
    console.log('浏览器不支持')
  }
}


let lastX, lastY, lastZ
const shakeThreshold = 30 // 定义一个阈值，用于判断是否发生了摇动，根据需要修改即可
const handleMotion = (event) => {
  const acceleration = event.accelerationIncludingGravity
  const x = acceleration.x
  const y = acceleration.y
  const z = acceleration.z

  if (lastX === undefined) {
    lastX = x
    lastY = y
    lastZ = z
    return
  }

  const deltaX = Math.abs(x - lastX)
  const deltaY = Math.abs(y - lastY)
  const deltaZ = Math.abs(z - lastZ)

  // 计算总的加速度变化量
  const accelerationChange = deltaX + deltaY + deltaZ

  // 如果加速度变化量超过了设定的阈值，则认为发生了摇动
  if (accelerationChange > shakeThreshold) {
    // 在这里，做自己的事情，调用自己的方法
    console.log('触发事件')
  }

  lastX = x
  lastY = y
  lastZ = z
}