H5页面实现摇一摇功能 - Better 前端博客

最近公司做了一个微信摇一摇领红包的活动，趁着刚上线有点空余时间，做一下摇一摇活动总结，记录一下做摇一摇活动过程中遇到的问题，旨在为了方便自己下次做类似活动的时候查阅以及让没做过摇一摇活动的小伙伴们少踩坑吧

用手机扫描二维码查看效果：

查看摇一摇demo效果

摇一摇要实现的功能细节

1. 如何实现监听手机设备摇一摇功能

使用H5原生API devicemotion事件监听设备摇晃频率

具体代码如下：

//运动事件监听
if (window.DeviceMotionEvent) {
    window.addEventListener(
        "devicemotion",
        deviceMotionHandler,
        false
    );
} else {
    alert("该浏览器不支持摇一摇功能");
}

注意：该事件在ios12以上非https协议下会失效，安卓手机不会，所以在ios手机上测试必须要在https协议的域名环境测试

ios_device_motion

2. 如何判断手机设备是不是在摇一摇

具体代码如下：

// 获取加速度信息
// 通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，进行设备是否有进行晃动的判断。
// 而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。
let SHAKETHRESHOLD = 4000;
let lastUpdate = 0;
let x,
    y,
    z,
    lastX = 0,
    lastY = 0,
    lastZ = 0;

function deviceMotionHandler(eventData) {
    let acceleration = eventData.accelerationIncludingGravity;
    let curTime = new Date().getTime();
    if (curTime - lastUpdate > 50) {
        let diffTime = curTime - lastUpdate;
        lastUpdate = curTime;
        x = acceleration.x;
        y = acceleration.y;
        z = acceleration.z;
        let speed = (Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime) * 10000;
        if (speed > SHAKETHRESHOLD) {
                setTimeout(() => {
                    alert("恭喜你，摇到漂亮妹纸一枚!"); // Do something
                }, 1000);
            }
        }
        lastX = x;
        lastY = y;
        lastZ = z;
    }
}

3. 如何实现手机振动功能

navigator.vibrate() 该方法可以调用手机设备的振动功能

注意：1、ios手机上浏览器不支持该方法 2、该方法需要用户触发某种操作才能调用，不能一加载完页面就调用振动功能

// 调用手机振动功能
useVibrateAction() {
    navigator.vibrate =
        navigator.vibrate ||
        navigator.webkitVibrate ||
        navigator.mozVibrate ||
        navigator.msVibrate;
    if (navigator.vibrate) {
        console.log("手机振动");
        navigator.vibrate(1000); // 振动时间毫秒数
    } else {
        console.log("该浏览器不支持振动功能");
    }
}

常见问题

H5 里怎么判断用户真的在摇手机？

先判断 window.DeviceMotionEvent 存在再监听 devicemotion，从 accelerationIncludingGravity 里取 x、y、z；每隔 50 毫秒以上取一次样，把三轴与上次值的差的绝对值除以时间差再乘 10000 当速度，超过常量 SHAKETHRESHOLD（示例取 4000）就算摇到了，代码里再延迟 1000 毫秒弹提示。

为什么摇一摇在 iPhone 上没反应？

协议问题。devicemotion 事件在 iOS 12 以上的非 https 协议下会失效，安卓手机不会，所以在 iOS 上测试必须放到 https 协议的域名环境；博客域名挂在 http 上时，苹果手机 iOS 12 以上就没效果。

navigator.vibrate() 有什么限制？

两条：iOS 手机上的浏览器不支持该方法，代码里还要依次兼容 webkitVibrate、mozVibrate、msVibrate 这几个前缀；另外它必须由用户触发某种操作后才能调用，不能一加载完页面就振动。振动那一步用的是 navigator.vibrate(1000)。