IOS 13陀螺仪监控

摘自
这是 IOS 13 之后的，苹果给我新增的一个方法用来获取用户权限，获取到用户权限之后，我们就可以来检测加速度了，但是注意该方法是 IOS 13 之后才有的，在 IOS 13 之前这么写的话，DeviceMotionEvent下并没有requestPermission方法就会报错，另外注意在最新的 IOS 13.3里，该方法需要用户触发获取，所以我们来看看最终版要写成什么样子，代码如下：

<script>
    // 判断是否是 ios 设备    
    function getIos(){
        var u = window.navigator.userAgent;
        return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    }    
    /*
        setDeviceMotion 添加陀螺仪监控
            cb devicemotion的事件处理函数
            errCb 不支持 devicemotion 时的处理回调
    */    
    function setDeviceMotion(cb,errCb){
        if(!window.DeviceMotionEvent){
                errCb("设备不支持DeviceMotion"); 
            return;
        }
        if (typeof DeviceMotionEvent.requestPermission === 'function') {
            // IOS 13
            DeviceMotionEvent.requestPermission()
                .then(permissionState => {
                    if (permissionState === 'granted') {
                        window.addEventListener('devicemotion',cb);
                    }
                })
                .catch((err)=>{
                    errCb("用户未允许权限");
                });
        } else {
            // 其他支持加速度检测的系统
            let timer = setTimeout(function(){
                errCb("用户未开启权限");
            },1000);
            window.addEventListener("devicemotion",(e)=>{
                clearTimeout(timer);
            },{once:true});
            window.addEventListener("devicemotion",cb);
        }
    }
    document.ontouchstart=function(){
        setDeviceMotion((e)=>{
            let motion = e.acceleration;
            let {x,y,z} = motion;
            if(!getIos()){
                x = -x;
                y = -y;
                z = -z;
            } 
        },(errMessage)=>{
            alert(errMessage);
        }); // 最后这里一定要注意，在IOS 13.3中必须通过用户操作去获取该权限
    }
</script>

到这一步，我们终于有了一个兼容的加速度监听处理，接下来我们就可以看看摇一摇的相关功能实现，这一步就比较简单了。

摇一摇实现
可以获取到手机的加速度之后，摇一摇的功能就比较简单了。当我们在晃动手机时，手机本身会产生一个加速度。我们可以截取手机的两次加速度比较，中间会有一个差值，当差值大于某个幅度时就可以认定用户进行了摇一摇这个操作。