兼容iOS13+和微信7.0.12+的摇一摇(devicemotion)

查了无数帖子,终于解决了iOS13+系统上Safari里的陀螺仪数据无法读取这个问题;
为了实现摇一摇,要读取陀螺仪数据,计算后进行相应操作,但iOS13,准确的说是beta2之后新增了一个权限,必须申请后才可以读取陀螺仪数据。
所以现在的前提是两个:必须是https,必须先获得权限;

https这个就不说了;
获取权限的代码如下:

function permission () {
    if ( typeof( DeviceMotionEvent ) !== "undefined" && typeof( DeviceMotionEvent.requestPermission ) === "function" ) {
        DeviceMotionEvent.requestPermission()
            .then( response => {
                console.log(response);
                if ( response == "granted" ) {
                    window.addEventListener( "devicemotion", (e) => {
                    	console.log(e.acceleration);
                        //do sth.(同样可以在这里进行摇一摇判断,相当于如果是iOS13+,则执行这里)
                        //进入摇一摇判断
			             var acc = e.acceleration;
			             x = acc.x;
			             y = acc.y;
			             if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed) {
			                 //触发摇一摇
			                 //do sth.
			             }
			             lastX = x;
			             lastY = y;
			                    })
			                }
			            })
            .catch( console.error )
    } else {
        alert( "DeviceMotionEvent is not defined" );
    }
}

你需要做的就是,先判断设备是否是ios13+,然后对应申请权限或直接执行代码;

var speed = 15;//5~25,数字越大灵敏度越低
var x = y = z = lastX = lastY = lastZ = 0;
if (window.DeviceOrientationEvent) {
     if (navigator.userAgent.indexOf('MicroMessenger/7.0.12') > -1 && navigator.userAgent.indexOf('iPhone OS 13') > -1) permission();
     else {
         console.log('普通ios或安卓');
         window.addEventListener( "devicemotion", (e) => {
         	 //进入摇一摇判断
             var acc = e.acceleration;
             x = acc.x;
             y = acc.y;
             if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed) {
                 //触发摇一摇
                 //do sth.
             }
             lastX = x;
             lastY = y;
         })
     }
 } else {
     console.log('不支持陀螺仪');
 }

终于是解决了!

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

万符网络

走过路过,欢迎打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值