微信web中IOS系统手机摇一摇功能无法使用问题及解决方法

2021-01-18   阅读:342   分类:后端    标签: 微信开发

随着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摇一摇问题。首次会弹出授权提示,授权了既可,经过用户授权开启,用户手动点击确定。


【腾讯云】618云上GO!云服务器限时秒杀,1核2G首年95元!

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/585.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
勤于学习,乐于分享。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×