微信web中IOS系统手机摇一摇功能无法使用问题及解决方法
随着ios的系统升级,安全协议越来越严格,例如ios系统手机的运动和方向感控被限制了,必须得用户手动授权方可进行,前端为了要实现摇一摇功能,必须要具备以下配置。1、必须是https协议,即打开h5页面的链接开头必须是https://…2、摇一摇功能开启必须经过用户授权,必须用户手动点击确定。问题1、博主之前的系统一直没使用ssh证书,没开启https,一样是可以使用,当时到今年想拿来使用发现一直没法使用,安卓也是无法摇一摇,为何以前能用呢?原因可以是微信调整了政策了,必须使用ssl加密的证书了。解决方法:给域名加上https加密证书。(免费的阿里ssl证书和腾讯ssl证书都有,免费申请一年,还有一个就是Let's Encrypt证书)问题2、ios问题:苹果手机,iso13以上系统无法使用摇一摇功能,这个问题也头疼了一阵子,网上找了教程,结合自己的整理。解决方法:新建一个ios.js文件,编写如下代码://iso兼容
varSHAKE_THRESHOLD=1000;
varlast_update=0;
varx=y=z=last_x=last_y=last_z=0;
functionshakeInit(){
if(window.DeviceMotionEvent){
window.addEventListener('devicemotion',deviceMotionHandler,false);
}else{
alert('notsupportmobileevent');
}
}
functiondeviceMotionHandler(eventData){
varacceleration=eventData.accelerationIncludingGravity;//eventData.acceleration;
varcurTime=newDate().getTime();
if((curTime-last_update)>100){
vardiffTime=curTime-last_update;
last_update=curTime;
x=acceleration.x;
y=acceleration.y;
z=acceleration.z;
varspeed=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手机做授权处理
functioniosGrantedTips(){
varua=navigator.userAgent.toLowerCase();//判断移动端设备,区分android,iphone,ipad和其它
if(ua.indexOf("likemacosx")>0){//判断苹果设备
//正则判断手机系统版本
varreg=/os[\d._]*/gi;
varverinfo=ua.match(reg);
varversion=(verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");
vararr=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()//摇一摇
}elseif(permissionState==='denied'){//打开的链接不是https开头
alert("当前IOS系统拒绝访问动作与方向。请退出微信,重新进入活动页面获取权限。")
}
}).catch((err)=>{
alert("用户未允许权限")
//======这里可以防止重复授权,需要改动,因为获取权限需要点击事件才能触发,所以这里可以改成某个提示框===//
console.log("由于IOS系统需要手动获取访问动作与方向的权限,为了保证摇一摇正常运行,请在访问提示中点击允许!")
ios13granted();
});
}else{//13.3以前的版本
alert("苹果系统13.3以前的版本")
}
}
}
functionios13granted(){
if(typeofDeviceMotionEvent.requestPermission==='function'){
DeviceMotionEvent.requestPermission().then(permissionState=>{
if(permissionState==='granted'){
shakeInit()//摇一摇
}elseif(permissionState==='denied'){//打开的链接不是https开头
alert("当前IOS系统拒绝访问动作与方向。请退出微信,重新进入活动页面获取权限。")
}
}).catch((error)=>{
alert("请求设备方向或动作访问需要用户手势来提示")
})
}else{
//处理常规的非iOS13+设备
alert("处理常规的非iOS13+设备")
}
}
iosGrantedTips();
//iso兼容把ios文件引入到h5页面中以上方法成功解决iso摇一摇问题。首次会弹出授权提示,授权了既可,经过用户授权开启,用户手动点击确定。