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

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

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

JS相关设置代码：

对13.3以后的版本处理，包括13.3 的判断处理，因测试时一些系统不符，重新作了判断

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,".");alert(version);// var arr=version.split(".");// console.log(arr[0]+"."+arr[1]+"."+arr[2]) //获取手机系统版本// if (arr[0]>12&&arr[1]>2) {  //对13.3以后的版本处理,包括13.3if (parseFloat(version) >= 13.3) {  //对13.3以后的版本处理,包括13.3DeviceMotionEvent.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();

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

iOS系统手机备忘录推荐
iOS系统的安全性和流畅性被很多人津津乐道,不少人的iPhone手机买回来用了好几年都不会卡顿,这跟iOS系统有很大关系.在使用iPhone手机的时候,少不了记录一些工作和生活上容易忘的事,有什么iO ...
完美解决微信js-sdk在IOS系统报invalid signature的问题
完美解决微信js-sdk在IOS系统报invalid signature的问题作者原创,转载注明出处一.解决方案先说结论再说过程: (一)npm i jweixin-1.6.0 .系本人优化封装 ...
解决Fiddler、Charles抓包iOS系统手机无法连接网络问题
找了一圈,我的iOS手机联网问题没解决,发现了这个原因. 一.iOS系统手机在Charles或者Fiddler设置代理,且下载证书后,需要点击手机二.步骤如下: 通用->关于本机->翻到 ...
iOS系统手机微信记录提取
原理简析:对于手机的存储来说,删除操作只是把索引删除了,让手机认为这里没有东西可以再往里写了.所以实际信息还留在存储介质中.故,只要信息没被新的内容替换,就有修复的可能! 一.环境&工具篇 P ...
关于微信手机端IOS系统中input输入框无法输入的问题
最近两天做移动端游戏举报页面.遇到一个问题,移动端的input都不能输入了,后来发现可能是 -webkit-user-select :none ; 在移动端开发中,我们有时有针对性的写一些特殊的重置, ...
ios点击推送闪退_升级iOS14.1之后，我的6S崩溃了|ios|ios系统|手机|闪退
熟悉我的观众老爷都知道,我是一个极致的果粉. 当初看到iOS14最低支持iPhone6S.iPhoneSE系列的A9处理器手机更新的时候,我还在暗自窃喜,苹果不愧是苹果,在硬件方面已经如此出色了,在软 ...
微信小程序iOS系统上echarts不能滑动的问题
在微信小程序中使用echarts插件的时候,遇到了一个问题:当系统是iOS时,如果手指先是长按图表,然后页面会无法滑动,其中南丁格尔玫瑰图尤其明显.作为一个微信小程序的新手开发,这个问题属实难倒我了. ...
通达OA 工作流流转过程中使用系统自带的提醒功能设置（图文）
在流程流转过程中,可以通过增加步骤的方式来提醒相关人员.其实可以使用系统自带的提醒功能,比如需要在某一步骤提醒流程发起人,就可以在提醒设置下设置提醒发起人,有3个选项可选,其中使用手机短信需要短信猫的 ...
web短信系统平台软件搭建后台功能介绍|移讯云短信系统
国际短信系统平台软件搭建后台功能介绍|移讯云短信系统平台外放接口介绍支持接入CMPP接口,支持smpp通道接入,支持外放CMPP接口(其他平台可以通过CMPP接入我平台),支持HTTP API J ...
IOS 系统自带的分享功能之 UIActivityViewController
关于系统自带的分享功能主要是在与这个类 UIActivityViewController 先上效果图然后呢直接上代码大家都懂的 ^&^ //分享的标题NSString *textToS ...

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

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

最新文章

热门文章