Vue實(shí)現(xiàn)搖一搖功能(兼容ios13.3以上)
最近做了個(gè)搖一搖類(lèi)似的功能,使用的是shake.js,但在ios13.3之前的版本中可以觸發(fā)搖一搖,之后的版本需要兼容,需要制作一個(gè)讓用戶(hù)能手動(dòng)點(diǎn)擊的彈框,才能使用戶(hù)授權(quán)動(dòng)作與方向的權(quán)限。(需使用https協(xié)議)
<van-popup v-model='isTip' :close-on-click-overlay='false'> <div class='mainBody'> <h3 class='systemTip'>溫馨提示</h3> <div class='confirm'> 由于ios系統(tǒng)需要手動(dòng)獲取訪問(wèn)動(dòng)作與方向的權(quán)限,為保障游戲的正常進(jìn)行,請(qǐng)?jiān)谠L問(wèn)提示中點(diǎn)擊允許。 </div> </div> <button @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, // 搖動(dòng)閾值 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’){// 打開(kāi)的鏈接不是https開(kāi)頭 alert('當(dāng)前IOS系統(tǒng)拒絕訪問(wèn)動(dòng)作與方向。請(qǐng)退出微信,重新進(jìn)入活動(dòng)頁(yè)面獲取權(quán)限。或直接點(diǎn)擊抽簽桶參與活動(dòng)') } }).catch((error) => { alert('請(qǐng)求設(shè)備方向或動(dòng)作訪問(wèn)需要用戶(hù)手勢(shì)來(lái)提示') }) } else { // 處理常規(guī)的非iOS 13+設(shè)備 alert('處理常規(guī)的非iOS 13+設(shè)備') } },}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 解決啟動(dòng)django,瀏覽器顯示“服務(wù)器拒絕訪問(wèn)”的問(wèn)題2. JSP數(shù)據(jù)交互實(shí)現(xiàn)過(guò)程解析3. Nginx+php配置文件及原理解析4. Yii2.0引入CSS,JS文件方法5. vue使用webSocket更新實(shí)時(shí)天氣的方法6. java中throws實(shí)例用法詳解7. python使用selenium爬蟲(chóng)知乎的方法示例8. ASP.NET MVC獲取多級(jí)類(lèi)別組合下的產(chǎn)品9. 討論CSS中的各類(lèi)居中方式10. python virtualenv和flask安裝沒(méi)有名為flask的模塊
