需要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:获取设备的运动状态
    }

赏

爬。