Vue實現(xiàn)搖一搖功能(兼容ios13.3以上)
更新時間:2021年01月26日 11:40:20 作者:尼克1601044331
這篇文章主要為大家詳細介紹了Vue實現(xiàn)搖一搖功能,兼容ios13.3以上,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
最近做了個搖一搖類似的功能,使用的是shake.js,但在ios13.3之前的版本中可以觸發(fā)搖一搖,之后的版本需要兼容,需要制作一個讓用戶能手動點擊的彈框,才能使用戶授權動作與方向的權限。(需使用https協(xié)議)

<van-popup v-model="isTip" class="popInfo" :close-on-click-overlay="false"> <div class="mainBody"> <h3 class="systemTip">溫馨提示</h3> <div class="confirm"> 由于ios系統(tǒng)需要手動獲取訪問動作與方向的權限,為保障游戲的正常進行,請在訪問提示中點擊允許。 </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 // 事件發(fā)生頻率,是可選值
});
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系統(tǒng)拒絕訪問動作與方向。請退出微信,重新進入活動頁面獲取權限。或直接點擊抽簽桶參與活動")
}
}).catch((error) => {
alert("請求設備方向或動作訪問需要用戶手勢來提示")
})
} else {
// 處理常規(guī)的非iOS 13+設備
alert("處理常規(guī)的非iOS 13+設備")
}
},
}
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vue數(shù)據操作之點擊事件實現(xiàn)num加減功能示例
這篇文章主要介紹了vue數(shù)據操作之點擊事件實現(xiàn)num加減功能,結合實例形式分析了vue.js事件響應及數(shù)值運算相關操作技巧,需要的朋友可以參考下2019-01-01
基于Electron24+Vite4+Vue3搭建桌面端應用實戰(zhàn)教程
這篇文章主要介紹了基于Electron24+Vite4+Vue3搭建桌面端應用,這次給大家主要分享的是基于electron最新版本整合vite4.x構建vue3桌面端應用程序,需要的朋友可以參考下2023-05-05
vue?watch中如何獲取this.$refs.xxx節(jié)點
這篇文章主要介紹了vue?watch中獲取this.$refs.xxx節(jié)點的方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08

