热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要为大家详细介绍了Vue实现摇一摇功能,兼容ios13.3以上,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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


 

温馨提示

由于ios系统需要手动获取访问动作与方向的权限,为保障游戏的正常进行,请在访问提示中点击允许。

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+设备")
 }
 },
}

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


推荐阅读
  • STM32代码编写STM32端不需要写关于连接MQTT服务器的代码,连接的工作交给ESP8266来做,STM32只需要通过串口接收和发送数据,间接的与服务器交互。串口三配置串口一已 ... [详细]
  • Docker基础入门与环境配置指南
    本文介绍了Docker——一款用Go语言编写的开源应用程序容器引擎。通过Docker,用户能够将应用及其依赖打包进容器内,实现高效、轻量级的虚拟化。容器之间采用沙箱机制,确保彼此隔离且资源消耗低。 ... [详细]
  • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
  • Hadoop集群搭建:实现SSH无密码登录
    本文介绍了如何在CentOS 7 64位操作系统环境下配置Hadoop集群中的SSH无密码登录,包括环境准备、用户创建、密钥生成及配置等步骤。 ... [详细]
  • Kubernetes Services详解
    本文深入探讨了Kubernetes中的服务(Services)概念,解释了如何通过Services实现Pods之间的稳定通信,以及如何管理没有选择器的服务。 ... [详细]
  • 本文详细介绍了如何在VSCode环境中配置Prettier工具以支持TypeScript项目,同时结合ESLint实现代码风格的一致性和自动化格式化。 ... [详细]
  • 深入理解Java字节码:方法调用详解
    本文详细介绍了Java字节码中的方法调用机制,通过具体示例解析了字节码如何处理方法调用及其参数传递。文章由Mahmoud Anouti撰写,原文链接:https://dzone.com/articles/introduction-to-java-bytecode ... [详细]
  • 来自FallDream的博客,未经允许,请勿转载,谢谢。一天一套noi简直了.昨天勉强做完了noi2011今天教练又丢出来一套noi ... [详细]
  • 本文详细介绍了如何在PHP中使用Memcached进行数据缓存,包括服务器连接、数据操作、高级功能等。 ... [详细]
  • 在学习了Splay树的基本查找功能后,可能会觉得它与普通的二叉查找树没有太大的区别,仅仅是通过splay操作减少了时间开销。然而,Splay树之所以被誉为“序列之王”,主要在于其强大的区间操作能力。 ... [详细]
  • 本文探讨为何Request对象的外观设计被认为是精妙的,重点在于其如何利用门面模式确保数据安全,同时保持系统的高效交互。 ... [详细]
  • 本文针对HDU 1042 N! 问题提供详细的解析和代码实现。题目要求计算给定整数N(0 ≤ N ≤ 10000)的阶乘N!。文章不仅提供了算法思路,还附上了C++语言的具体实现。 ... [详细]
  • 深入理解iOS中的链式编程:以Masonry为例
    本文通过介绍Masonry这一轻量级布局框架,探讨链式编程在iOS开发中的应用。Masonry不仅简化了Auto Layout的使用,还提高了代码的可读性和维护性。 ... [详细]
  • 如何高效渲染JSON数据
    本文介绍了在控制器中返回JSON结果的方法,并详细说明了如何利用jQuery处理和展示这些数据,为Web开发提供了实用的技巧。 ... [详细]
  • 美团安全响应中心推出全新配送业务测试活动,带来双重福利,邀您共同参与! ... [详细]
author-avatar
云思逸
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有