|
整理一下，前段时间开发公众号遇到了很多坑，在网上也搜索了不少教程，大部分都是基于原生的，而且坑也很多。废话不多少了，直接上代码
1.首先在data 中申明?
data() {
return {
flag:0,
shake : 3000,
last_update : 0,
x : 0,
y : 0,
z : 0,
last_x : 0,
last_y : 0,
last_z : 0,
}
},
2.定义方法
methods:{
deviceMotionHandler(eventData) {
if(this.flag==0){
var acceleration = eventData.accelerationIncludingGravity,
currTime = new Date().valueOf(),
diffTime = currTime - this.last_update;
if (diffTime > 100) {
this.last_update = currTime;
this.x = acceleration.x;
this.y = acceleration.y;
this.z = acceleration.z;
var speed = Math.abs(this.x + this.y + this.z - this.last_x - this.last_y - this.last_z) / diffTime * 10000
if (speed > this.shake) {
// alert("中奖了")
//定义自己的方法
}
this.last_x = this.x;
this.last_y = this.y;
this.last_z = this.z;
}
}
},
iosGrantedTips() {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("like mac os x") > 0) {
var reg = /os [\d._]*/gi;
var verinfo = ua.match(reg);
var version = (verinfo + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");
var arr = version.split(".");
if (arr[0] > 12 && arr[1] > 2) { //对13.3以后的版本处理,包括13.3,
DeviceMotionEvent.requestPermission()
.then(permissionState => {
if (permissionState === 'granted') {
window.addEventListener('devicemotion', this.deviceMotionHandler, true)
}
//
})
.catch((err) => {
//alert("用户未允许权限")
//======这里可以防止重复授权，需要改动，因为获取权限需要点击事件才能触发，所以这里可以改成某个提示框===//
alert("由于IOS系统需要手动获取访问动作与方向的权限，为了保证抽奖正常运行，请在访问提示中点击允许！")
this.ios13granted()
});
} else { //13.3以前的版本
window.addEventListener('devicemotion', this.deviceMotionHandler, true)
}
} else {
// alert('安卓手机')
window.addEventListener('devicemotion', this.deviceMotionHandler, true)
}
},
ios13granted() {
DeviceMotionEvent.requestPermission().then((permissionState) => {
if (permissionState === 'granted') {
window.addEventListener('devicemotion', this.deviceMotionHandler, true);
}
}).catch((error) => {
alert(error)
})
},
click(){
this.iosGrantedTips() //这里一定是用户主动去点击按钮才能触发
}
}
3.调用iosGrantedTips()这个方法就行了，? 注意苹果13.3+的手机这里一定是用户主动点击去调用的，放在页面初始化的函数中，会导致调用失败。
有啥不懂的欢迎浏览讨论
|