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页面刷新,数据丢失的问题
Nov 24 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vue3.0实现插件封装
Dec 14 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
基于vuex实现购物车功能
Jan 10 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
vue中div禁止点击事件的实现
Apr 02 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在Web开发领域的优势
2006/10/09 PHP
php中对2个数组相加的函数
2011/06/24 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
php的4种常见运行方式
2015/03/20 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
jquery实现心算练习代码
2010/12/06 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
Python常用知识点汇总
2016/05/08 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
如何在Python对Excel进行读取
2020/06/04 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
HTML5的语法变化介绍
2013/08/13 HTML / CSS
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
最新大学职业规划书范文
2013/12/30 职场文书
网络编辑岗位职责
2014/03/18 职场文书
法律进社区实施方案
2014/03/21 职场文书
校园文明标语
2014/06/13 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers