微信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兼容
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();
// iso兼容

把ios文件引入到h5页面中

<script type="text/javascript" src="ios.js"></script>

以上方法成功解决iso摇一摇问题。首次会弹出授权提示，授权了既可，经过用户授权开启，用户手动点击确定。