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

羽筠

已于 2024-01-22 11:40:59 修改

阅读量2.3k

点赞数

分类专栏：微信项目 JS 文章标签：微信前端 ios

于 2021-01-15 12:19:21 首次发布

本文链接：https://blog.csdn.net/qq_16494241/article/details/112657385

版权

JS 同时被 2 个专栏收录

72 篇文章 0 订阅

订阅专栏

微信项目

15 篇文章 0 订阅

订阅专栏

本文介绍了在iOS系统升级后，由于安全协议的加强，前端实现摇一摇功能需要用户授权。文章提供了一个实现摇一摇功能的代码示例，并详细说明了针对iOS13.3及以上版本的授权处理步骤，包括检测用户是否已授权，以及在用户未授权时的提示和处理方式。此外，代码还包含了对非iOS13.3版本的兼容处理。

摘要由CSDN通过智能技术生成

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

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

相关设置代码demo：

对于 IOS 13.3以后的版本处理，包括13.3 的判断处理

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=750, user-scalable=no">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
<title>摇一摇test</title>
</head>
<body>


<script type="text/javascript">
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('不支持摇一摇');
  }
}
function deviceMotionHandler(eventData) {
  //eventData.acceleration
  var acceleration = eventData.accelerationIncludingGravity;
  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(){
  //判断移动端设备，区分android，iphone，ipad和其它
  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,".");
    alert(version);
    
    //对13.3以后的版本处理,包括13.3
    if (parseFloat(version) >= 13.3) {
      DeviceMotionEvent.requestPermission().then(permissionState => {
        if (permissionState === 'granted') {
          //已授权
          //摇一摇
          shakeInit();
        } else if(permissionState === 'denied'){
          // 打开的链接不是https开头
          alert("1、请确认打开的链接一定是https开头；2、当前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系统拒绝访问动作与方向。请先退出微信，再重新进入页面同意获取权限。");
        alert("您已拒绝访问动作与方向。若需同意访问动作与方向，请先退出微信，再重新进入页面同意获取权限。");
      }
    }).catch((error) => {
      alert("请求设备方向或动作访问需要用户手势来提示");
    })
  } else {
    // 处理常规的非iOS 13+设备
    alert("处理常规的非iOS 13+设备");
  }
}
iosGrantedTips();
</script>


</body>
</html>