选择困难症，实现摇一摇随机选餐

摇晃手机触发事件，但是想要触发这个事件，要有一定的摇晃速度，因为平时我们抓握手机的时候，手不可能是静止的，会有轻微的晃动。

在轻微的晃动下是不能触发的，所以要设置一定的速度。在小程序的 api 中可以用 wx.onAccelerometerChange 来实现

wx.onAccelerometerChange

用于加速度数据事件的监听，可以监听到设备移动的加速，传递一个回调函数，可以获取到设备在x轴、y轴、z轴方向加速度的值，值越大说明移动的速度越快。

在加速度的判断，我设置了为 1，超过 1 就说明摇了，区别于手握时的轻微摇晃。

js 复制代码

// 开启监听
const openOnShake = () => {
    wx.onAccelerometerChange(onShake)
}
// 关闭监听
const closeOnShake = () => {
    wx.offAccelerometerChange(onShake)
}
const onShake = (res) => {
    if (res.x > 1 || res.y > 1 || res.z > 1) {
        wx.showToast({
            title: `摇一摇成功`,
            icon: 'success',
            duration: 2000
        })
    }
}

与相关的有 wx.startAccelerometer 用于启动监听加速度变化事件，设置加速度回调函数的频率。

在 window 监听的事件中有 DeviceMotion，也可以获取设备运动的数据。其中的 acceleration 就是包含设备运动的各类信息。

x 表示 x 轴（西到东）上的加速度
y 表示 y 轴（南到北）上的加速度
z 表示 z 轴（下到上）上的加速度

js 复制代码

// 开启监听
window.addEventListener('devicemotion', devicemotion, false);
function devicemotion(event) {
  var acceleration = event.acceleration;
  x = acceleration.x;
  y = acceleration.y;
  z = acceleration.z;
}

既然可以触发摇一摇这个被动，就可以往这个回调添加想要的事件了。

在回调函数中使用

Math.floor 返回小于或等于一个给定数字的最大整数。向下取整。

Math.random 返回介于 0 ~ 1 之间的一个随机数，乘以菜品数组长度，随机返回数组的 index 值，从何随机获取数组中的值。

js 复制代码

// 随机菜品
const menu = [
    '红烧罗非鱼', '茄子肉末', '酸菜鱼', '奥尔良鸡翅', '手撕鸡'
]
let food = null
const onShake = (res) => {
    if (res.x > 1 || res.y > 1 || res.z > 1) {
        food = arr[Math.floor(Math.random() * menu.length)];
        console.log(`今天就吃${food}这个了。`)
    }
}

为了达到有个随机选择的效果我用循环定时器去赋值，这样就有了类似的随机动画

js 复制代码

const randomFun = () => {
    setInterval(() => {
        food = arr[Math.floor(Math.random() * menu.length)];
    }, 100)
    setTimeout(() => {
        clearInterval(timer.value)
        timer = null
        // 执行结束后添加个震动效果
        wx.vibrateShort({
          type: 'heavy'
        })
    }, 5000)
}

但是这时候问题又来了，如果我在循环没结束又摇了一次，它会一直循环不断。

于是我给它添加个时间判断，超过 5秒才可以进行下一次摇一摇

js 复制代码

let lastTime = 0
const onShake = (res) => {
    if (res.x > 1 || res.y > 1 || res.z > 1) {
        let curTime = new Date().getTime();
        if((curTime - lastTime) > 5000) {
            lastTime = curTime
            randomFun()
        }
    }
}