微信web中IOS系统手机摇一摇功能实现及问题解决

随着ios的系统升级，安全协议越来越严格，例如ios系统手机的运动和方向感控被限制了，必须得用户手动授权方可进行，前端为了要实现摇一摇功能，必须要具备以下思路。

1、必须是https协议，即打开h5页面的链接开头必须是https://…
2、摇一摇功能开启必须经过用户授权，必须用户手动点击确定。

JS相关设置代码：

var SHAKE_THRESHOLD = 1000;
var last_update = 0;
var x = y = z = last_x = last_y = last_z = 0;
function shakeInit() {
	if (window.DeviceMotionEvent) {
		window.addEventListener('devicemotion', deviceMotionHandler, false);
	} else {
		alert('not support mobile event');
	}
}
function deviceMotionHandler(eventData) {
	var acceleration = eventData.accelerationIncludingGravity;//eventData.acceleration;
	var curTime = new Date().getTime();
	if ((curTime - last_update) > 100) {
		var diffTime = curTime - last_update;
		last_update = curTime;
		x = acceleration.x;
		y = acceleration.y;
		z = acceleration.z;
		var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
		if (speed > SHAKE_THRESHOLD) {
			alert('摇手机了');
		}
	}
	last_x = x;
	last_y = y;
	last_z = z;
}
shakeInit();

// 安卓手机均可正常实现摇一摇，以下代码针对ios手机做授权处理

function iosGrantedTips(){
	var ua = navigator.userAgent.toLowerCase(); //判断移动端设备，区分android，iphone，ipad和其它
	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(".");
		console.log(arr[0]+"."+arr[1]+"."+arr[2]) //获取手机系统版本
		if (arr[0]>12&&arr[1]>2) {  //对13.3以后的版本处理,包括13.3
			DeviceMotionEvent.requestPermission().then(permissionState => {
				if (permissionState === 'granted') { //已授权
					shakeInit() //摇一摇
				} else if(permissionState === 'denied'){// 打开的链接不是https开头
					alert("当前IOS系统拒绝访问动作与方向。请退出微信，重新进入活动页面获取权限。")
				}
			}).catch((err)=>{
				alert("用户未允许权限")
				//======这里可以防止重复授权，需要改动，因为获取权限需要点击事件才能触发，所以这里可以改成某个提示框===//
				console.log("由于IOS系统需要手动获取访问动作与方向的权限，为了保证摇一摇正常运行，请在访问提示中点击允许！")
				ios13granted();
			});
		}else{  //13.3以前的版本
			alert("苹果系统13.3以前的版本")
		}
	}
}
function ios13granted() {
	if (typeof DeviceMotionEvent.requestPermission === 'function') {
		DeviceMotionEvent.requestPermission().then(permissionState => {
			if (permissionState === 'granted') {
				shakeInit() //摇一摇
			} else if(permissionState === 'denied'){// 打开的链接不是https开头
				alert("当前IOS系统拒绝访问动作与方向。请退出微信，重新进入活动页面获取权限。")
			}
		}).catch((error) => {
			alert("请求设备方向或动作访问需要用户手势来提示")
		})
	} else {
		// 处理常规的非iOS 13+设备
		alert("处理常规的非iOS 13+设备")
	}
}
iosGrantedTips();