Vue實(shí)現(xiàn)搖一搖功能(兼容ios13.3以上)
最近做了個搖一搖類似的功能,使用的是shake.js,但在ios13.3之前的版本中可以觸發(fā)搖一搖,之后的版本需要兼容,需要制作一個讓用戶能手動點(diǎn)擊的彈框,才能使用戶授權(quán)動作與方向的權(quán)限。(需使用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)需要手動獲取訪問動作與方向的權(quán)限,為保障游戲的正常進(jìn)行,請?jiān)谠L問提示中點(diǎn)擊允許。 </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("當(dāng)前IOS系統(tǒng)拒絕訪問動作與方向。請退出微信,重新進(jìn)入活動頁面獲取權(quán)限。或直接點(diǎn)擊抽簽桶參與活動")
}
}).catch((error) => {
alert("請求設(shè)備方向或動作訪問需要用戶手勢來提示")
})
} else {
// 處理常規(guī)的非iOS 13+設(shè)備
alert("處理常規(guī)的非iOS 13+設(shè)備")
}
},
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue Vine實(shí)現(xiàn)一個文件中寫多個組件的方法(最近很火)
Vue Vine提供了全新Vue組件書寫方式,主要的賣點(diǎn)是可以在一個文件里面寫多個vue組件,Vue Vine是一個vite插件,vite解析每個模塊時都會觸發(fā)插件的transform鉤子函數(shù),本文介紹Vue Vine是如何實(shí)現(xiàn)一個文件中寫多個組件,感興趣的朋友一起看看吧2024-07-07
詳解Vue用axios發(fā)送post請求自動set cookie
本篇文章主要介紹了Vue用axios發(fā)送post請求自動set cookie,非常具有實(shí)用價值,需要的朋友可以參考下2017-05-05
vue-cli自定義創(chuàng)建項(xiàng)目eslint依賴沖突解決方式
vue-cli是vue.js的腳手架,用于自動生成vue.js+webpack的項(xiàng)目模板,在創(chuàng)建項(xiàng)目時,如果遇到npm安裝報錯,通常是由于依賴版本沖突造成的,文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
vue實(shí)現(xiàn)指定日期之間的倒計(jì)時
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)指定日期之間的倒計(jì)時,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-05-05
淺談Vue CLI 3結(jié)合Lerna進(jìn)行UI框架設(shè)計(jì)
這篇文章主要介紹了淺談Vue CLI 3結(jié)合Lerna進(jìn)行UI框架設(shè)計(jì),在此之前先簡單介紹一下Element的構(gòu)建流程,以便對比新的UI框架設(shè)計(jì)。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
vue3不能使用history.pushState修改url參數(shù)踩坑
這篇文章主要為大家介紹了vue3不能使用history.pushState修改url參數(shù)踩坑解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02
一文詳解Vue的響應(yīng)式原則與雙向數(shù)據(jù)綁定
使用 Vue.js 久了,還是不明白響應(yīng)式原理和雙向數(shù)據(jù)綁定的區(qū)別?今天,我們就一起來學(xué)習(xí)一下,將解釋它們的區(qū)別,快跟隨小編一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08

