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

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

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.jscreated(){
     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+设备") }
 }
,}
    

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

@H_777_21@JavaScript+H5实现微信摇一摇功能
• JS实现微信摇一摇原理解析
• javascript html5摇一摇功能的实现

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！