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 elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue postcss-px2rem 自适应布局
May 15 Vue.js
vue3不同环境下实现配置代理
May 25 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 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
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
JavaScript的Function详细
2006/11/14 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
python利用beautifulSoup实现爬虫
2014/09/29 Python
Python中的tuple元组详细介绍
2015/02/02 Python
python实现xlsx文件分析详解
2018/01/02 Python
opencv与numpy的图像基本操作
2019/03/08 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
django admin 添加自定义链接方式
2020/03/11 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
新婚姻法离婚协议书范文
2014/11/30 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle