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 相关文章推荐
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
PHP数据缓存技术
2007/02/14 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
jquery实现excel导出的方法
2013/04/04 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
分析在Python中何种情况下需要使用断言
2015/04/01 Python
numpy中索引和切片详解
2017/12/15 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
python绘制多个曲线的折线图
2020/03/23 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
python中对_init_的理解及实例解析
2019/10/11 Python
python Tornado框架的使用示例
2020/10/19 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
校庆接待方案
2014/03/18 职场文书
入党积极分子评语
2014/05/04 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
网吧温馨提示
2015/07/17 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL