需要https协议
需要主动授权
- 只要加个按钮,引导用户主动授权,我试了几次被动授权,结果是在个别苹果ios13+系统下弹窗一直不跳出来
代码如下:(vue)
template下加个按钮点击事件
<button class="auth-button" @click="getAuth">获取权限</button>
// getAuth触发iosGrantedTips,this.iosGrantedTips()
iosGrantedTips() {
var ua = navigator.userAgent.toLowerCase() //判断移动端设备,区分android,iphone,ipad和其它
if (ua.indexOf('like mac os x') > 0) {
//判断苹果设备
// 正则判断手机系统版本
var reg = /os [\d._]*/gi
var verinfo = ua.match(reg)
var version = (verinfo + '')
.replace(/[^0-9|_.]/gi, '')
.replace(/_/gi, '.')
var arr = version.split('.')
const edition = arr[0] + '.' + arr[1]
alert(arr[0] + '.' + arr[1]) //获取手机系统版本
if (edition >= 13.3) {
//对13.3以后的版本处理,包括13.3
DeviceMotionEvent.requestPermission()
.then((permissionState) => {
if (permissionState === 'granted') {
//已授权
alert('已授权,granted')
this.shake()
} else if (permissionState === 'denied') {
// 打开的链接不是https开头
alert(
'denied,当前IOS系统拒绝访问动作与方向。请退出微信,重新进入页面获取权限。HTTPS'
)
}
})
.catch((err) => {
alert(err, 'iosGrantedTips')
alert(
'由于IOS系统需要手动获取访问动作与方向的权限,为了保证摇一摇正常运行,请在访问提示中点击允许!'
)
this.ios13granted()
})
} else {
//13.3以前的版本
this.shake()
}
} else {
this.shake()
}
}
ios13granted() {
alert(DeviceMotionEvent.requestPermission)
if (typeof DeviceMotionEvent.requestPermission === 'function') {
DeviceMotionEvent.requestPermission()
.then((permissionState) => {
if (permissionState === 'granted') {
this.shake()
} else if (permissionState === 'denied') {
// 打开的链接不是https开头
alert(
'当前IOS系统拒绝访问动作与方向。请退出微信,重新进入活动页面获取权限。'
)
}
})
.catch((error) => {
alert(error, 'ios13granted')
})
} else {
// 处理常规的非iOS 13+设备
this.shake()
}
},
shake.js
shake() {
window.addEventListener('shake', this.shakeEventDidOccur, false) //devicemotion:获取设备的运动状态
}
Comments | NOTHING