Vue实现摇一摇功能(兼容ios13.3以上)


Posted in Vue.js onJanuary 26, 2021

最近做了个摇一摇类似的功能,使用的是shake.js,但在ios13.3之前的版本中可以触发摇一摇,之后的版本需要兼容,需要制作一个让用户能手动点击的弹框,才能使用户授权动作与方向的权限。(需使用https协议)

Vue实现摇一摇功能(兼容ios13.3以上)

<van-popup v-model="isTip" class="popInfo" :close-on-click-overlay="false">
 <div class="mainBody">
 <h3 class="systemTip">温馨提示</h3>
 <div class="confirm">
 由于ios系统需要手动获取访问动作与方向的权限,为保障游戏的正常进行,请在访问提示中点击允许。
 </div>
 </div>
 <button class="bottomButton" @click="handleInit">
 知道了
 </button>
</van-popup>

shake.js

//引入shake.js
created(){
 this.initShake()
 const isAction = JSON.parse(localStorage.getItem('getAction'))
 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,".");
 if (parseFloat(version) >= 13.3 && !isAction){
 localStorage.setItem("getAction",true)
 this.isTip = true
 }
 }
},
methods:{
 initShake(){
 this.myShakeEvent = new Shake({
 threshold: 15, // 摇动阈值
 timeout: 1000 // 事件发生频率,是可选值
 });
 this.myShakeEvent.start();
 window.addEventListener('shake', xx);
 },
 handleInit(){
 this.isTip = false
 this.ios13granted()
 },
 ios13granted() {
 if (typeof DeviceMotionEvent.requestPermission === 'function') {
 DeviceMotionEvent.requestPermission().then(permissionState => {
 if (permissionState === 'granted') {
 this.initShake() //摇一摇
 } else if(permissionState === 'denied'){// 打开的链接不是https开头
 alert("当前IOS系统拒绝访问动作与方向。请退出微信,重新进入活动页面获取权限。或直接点击抽签桶参与活动")
 }
 }).catch((error) => {
 alert("请求设备方向或动作访问需要用户手势来提示")
 })
 } else {
 // 处理常规的非iOS 13+设备
 alert("处理常规的非iOS 13+设备")
 }
 },
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vuex的数据渲染与修改浅析
Nov 26 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
vue3不同环境下实现配置代理
May 25 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 #Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 #Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 #Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 #Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 #Vue.js
vue keep-alive的简单总结
Jan 25 #Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 #Vue.js
You might like
如何将数据从文本导入到mysql
2006/10/09 PHP
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
关于尾递归的使用详解
2013/05/02 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
jquery简单体验
2007/01/10 Javascript
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
python与字符编码问题
2019/05/24 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
文明学生标兵事迹
2014/01/21 职场文书
学校大课间活动方案
2014/01/30 职场文书
调查研究项目计划书
2014/04/29 职场文书
银行催款通知书
2015/04/17 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
Python实现Hash算法
2022/03/18 Python