过年后回来的时候做了一个摇一摇的H5小游戏。因为我使用的是安卓手机，一直没有发现在苹果手机上不能使用。
刚开是以为是http和https的问题，但是在ios上即使使用https开头的链接然后还是不能摇~
后来网上找了原因说是ios13+的版本，浏览器对设备运动和方向事件的访问权限处于关闭状态，但是可以请求这种权限，类似于请求相机权限吧。
因此，在IOS13+的移动端中，需要在DeviceMotionEvent上调用requestPermission这个方法，该方法请求用户当前来源的权限以显示通知，然后根据用户的不同选择，触发不同的状态【granted（被授予），denied（被拒绝） 或者default（默认）】，并返回一个Promise对象。
代码如下:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
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] > 13) { //对13以后的版本处理,
DeviceMotionEvent.requestPermission().then(permissionState => {
if (permissionState === "granted") {
alert("你授权了，可以进行摇一摇啦");
}
if (permissionState === "denied") {
alert("你拒绝了");
}
}).catch((err) => {
//======这里可以防止重复授权，因为获取权限需要点击事件才能触发===//
Modal.warning({
title: '获取授权',
content: '请在接下来的然窗中允许授权，否则将无法正常进行摇一摇',
onOk() {
reqShakePermission();
},
});
});
} else { //13以前的版本
alert("你的手机支持摇一摇")
}
} else {
}
function reqShakePermission() {
if (typeof DeviceMotionEvent.requestPermission === "function") {
DeviceMotionEvent.requestPermission().then((permissionState) => {
if (permissionState === "granted") {
var speed = 15; // 用来判定的加速度阈值，太大了则很难触发
var x, y, z, lastX, lastY, lastZ;
x = y = z = lastX = lastY = lastZ = 0;
window.addEventListener("devicemotion", function (event) {
var acceleration = event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
if (self.state.clickStatus) {
if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed) {
// 用户设备摇动了，触发响应操作
// 此处的判断依据是用户设备的加速度大于我们设置的阈值
alert("摇动了手机");
}
} else {//如果已经生成了结果就不需要再重新生成了
}
lastX = x;
lastY = y;
}, false);
} else if (permissionState == "denied") {
alert("拒绝喽");
}
}).catch((error) => {
// console.log(error);
});
} else {
// 处理常规的非iOS 13+设备
// console.log("处理常规的非iOS 13+设备");
if (window.DeviceMotionEvent) {
alert("可以进行摇一摇");
} else {
// console.log('不支持window.DeviceMotionEvent');
}
}
}
效果图：
PS：点击允许即可使用摇一摇功能。如果拒绝，需要在关掉这个进程再次进入页面才会再次询问。否则一直用不了摇一摇功能哦~