Vue實現搖一搖功能(相容ios13.3以上)
阿新 • • 發佈:2021-01-28
最近做了個搖一搖類似的功能,使用的是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.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+裝置") } },}
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。