ios重力感应失效—deviceMotion及deviceOrientation事件不触发

Posted 2021-09-26 autofelix

〝 古人学问遗无力，少壮功夫老始成 〞

deviceMotion及deviceOrientation事件不触发，常码字不易，出精品更难，没有特别幸运，那么请先特别努力，别因为懒惰而失败，还矫情地将原因归于自己倒霉。你必须特别努力，才能显得毫不费力。如果这篇文章能给你带来一点帮助，希望给飞兔小哥哥一键三连，表示支持，谢谢各位小伙伴们。

目录

一、发现问题

二、问题原因

三、授权优化

四、陀螺仪插件

---

一、发现问题

• 摇一摇功能，无法触发 devicemotion 事件
• 导致手机重力感应功能失效

//原生js监听陀螺仪事件
​​​​if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', function () {
        var acceleration = event.accelerationIncludingGravity;
        var x = acceleration.x;
        var y = acceleration.y;
        var z = acceleration.z;
        // you can do something
    }, false);
}

二、问题原因

• 重力感应需要使用 https 协议，http下不工作
• ios13+系统后，苹果手机提高用户隐私安全性，导致重力感应需要用户主动触发才可以使用
• 苹果授权时候，会弹出comfirm弹窗，确认是否授权重力感应，暂时有三个返回值。
• 如果在http下，授权只会返回denied，所以确认在https下
•  这里需要注意，如果用户取消了授权，将在短时间内无法再次授权使用，因此可以在授权前进行提示，提高用户体验性
• 目前确认主动触发的事件可以是click，touch等
• 授权授权触发代码如下

//IOS13+ 授权流程
window.DeviceOrientationEvent.requestPermission()
    .then(state => {
        switch (state) {
            case "granted":
                // you can do something
                break;
            case "denied":
                alert("你拒绝了使用陀螺仪");
                break;
            case "prompt":
                alert("其他行为");
                break;
        }
});

三、授权优化

DeviceMotionEvent.requestPermission().then(function (state) {
    if ('granted' === state) {
       window.addEventListener('devicemotion', function () {
           // you can do something
       }, false);
    } else {
        alert('apply permission state: ' + state);
    }
}).catch(function(err){
    alert('error: ' + err);
});

四、陀螺仪插件

• orienter插件，是第三方用户自己封装的关于陀螺仪方法
• 该插件如有需要请自行下载引入

var o = new Orienter();

o.onOrient = function (obj) {

    var alpha = obj.a; //左右
    var beta= obj.b; //前后
    var gamma= obj.g; //扭转
    var longitude= obj.lon; //纬度
    var latitude= obj.lat; //精度

};

o.on();