乐趣区

关于程序员:H5页面实现摇一摇功能

jiezi

H5 页面实现摇一摇性能

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

<!– > 留神：因为我的集体博客域名协定是 http 的，所以苹果手机 ios12 以上没有成果 –>

点这里查看摇一摇 demo 成果

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

摇一摇要实现的性能细节

1. 如何实现监听手机设施摇一摇性能

应用 H5 原生 API devicemotion 事件监听设施摇摆频率

具体代码如下：

// 静止事件监听
if (window.DeviceMotionEvent) {
    window.addEventListener(
        "devicemotion",
        deviceMotionHandler,
        false
    );
} else {alert("该浏览器不反对摇一摇性能");
}

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

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("该浏览器不反对振动性能");
    }
}

本文由 mdnice 多平台公布

退出移动版