一、授权页面布局

wxml页面

<view class='body' style='height: {{windowHeight}}px;'>
  <view class='body-ico'>
    <image src='../../image/ico.png'></image>
  </view>
  <view class='auth'>微信{{stateName}}授权页面</view>
  <view class='auth-text'>此页面是微信{{stateName}}授权页面，点击下方按钮弹出授权页面</view>
  <view class='auth-btn' bindtap='getRecordAuth' wx:if='{{authFlag == 0}}'>点击授权</view>
  <view class='auth-btn' wx:else>
    <button open-type="getUserInfo" bindgetuserinfo='bindgetuserinfo'>点击授权</button>
  </view>
</view>

json页面

{
  "navigationBarTitleText": "授权页面",
  "disableScroll": true
}

wxss页面

.body {
  width: 750rpx;
  box-sizing: border-box;
  /* border: 1rpx solid #000; */
}

.body-ico {
  /* padding-top: 220rpx; */
  margin: 220rpx auto 0 auto;
  width: 220rpx;
  height: 220rpx;
  box-sizing: border-box;
  /* border: 1rpx solid #000; */
}

.body-ico image {
  width: 100%;
  height: 100%;
}

.auth {
  margin-top: 30rpx;
  width: 750rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 32rpx;
  text-align: center;
  /* border: 1rpx solid #000; */
}

.auth-text {
  margin: 30rpx auto 0 auto;
  width: 500rpx;
  height: 80rpx;
  font-size: 28rpx;
  /* border: 1rpx solid #000; */
  color: #aaa;
}

.auth-btn {
  margin: 200rpx auto 0 auto;
  text-align: center;
  width: 220rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  border: 1rpx solid #08AF07;
  border-radius: 10rpx;
  color: #08AF07;
}

js界面

Page({

  data: {
    windowWidth: '', //可使用窗口宽度
    windowHeight: '', //可使用窗口高度
    authFlag: 0,
  },

  onLoad: function(options) {
    var that = this

    console.log(options)
    console.log(options.tempData)

    //必须携带 权限参数
    if (options.tempData) {} else {
      wx.showModal({
        title: '',
        content: '请正确进入!',
        showCancel: false,
        success: function(res) {
          if (res.confirm) {
            console.log('用户点击确定')
            wx.reLaunch({
              url: '../index/index'
            })
          }
        }
      })
      return false
    }

    var tempData = []
    tempData = options.tempData.split('and')
    that.setData({
      stateName: tempData[0],
      stateKey: tempData[1]
    })

    //兼容获取用户信息授权
    if (that.data.stateKey == 'scope.userInfo') {
      var taht = this
      console.log('我是用户信息授权')

      that.setData({
        authFlag: 1
      })
    }

    wx.getSystemInfo({
      success: function(res) {
        // console.log(res.pixelRatio) //设备像素比
        // console.log(res.windowWidth) //可使用窗口宽度
        // console.log(res.windowHeight) //可使用窗口高度
        that.setData({
          windowWidth: res.windowWidth, //可使用窗口宽度
          windowHeight: res.windowHeight, //可使用窗口高度
        })
        console.log(that.data.windowHeight)
      }
    })

  },

  onShow: function() {
    console.log('111')
  },

  // 权限询问
  getRecordAuth: function() {
    var that = this
    console.log('我是授权页面')
    console.log(that.data.stateName)
    console.log(that.data.stateKey)
    wx.getSetting({
      success(res) {
        if (!res.authSetting[that.data.stateKey]) {
          wx.authorize({
            scope: that.data.stateKey,
            success() {
              //成功授权 返回上个页面
              console.log("授权" + that.data.stateName + '成功')
              wx.navigateBack({
                delta: 1,
              })
            },
            fail() {
              console.log("授权" + that.data.stateName + '失败')
              //授权失败后进行提醒 并要求手动授权
              that.getAsk(that.data.stateName, that.data.stateKey)
            }
          })
        } else {
          console.log("我是已经授权成功")
        }
      }
    })
  },

  //拒绝授权后再次询问
  getAsk: function(stateName, stateKey) {
    var that = this

    wx.showModal({
      title: '',
      content: '拒绝' + stateName + '授权后将会影响您的体验！是否进行手动授权！',
      showCancel: true,
      success: function(res) {
        if (res.confirm) {
          //点击确认后打开手动设置页面
          wx.openSetting({
            success: (res) => {
              console.log(res.authSetting);
              if (!res.authSetting[stateName]) {
                //未设置录音授权
                console.log("未设置录音授权");
                wx.showModal({
                  title: '提示',
                  content: '您未进行' + stateName + '授权，功能将无法使用。',
                  showCancel: false,
                  success: function(res) {},
                })
              } else {
                //第二次才成功授权 返回上个页面
                console.log("设置录音授权成功");
                wx.navigateBack({
                  delta: 1,
                })
              }
            },
            fail: function() {
              console.log("授权设置录音失败");
            }
          })

        } else if (res.cancel) {
          //点击取消后 
        }
      }
    })
  },

  // 用户信息授权 兼容
  bindgetuserinfo: function(res) {
    var that = this
    console.log("我是页面回调", res)

    //如果授权成功则返回
    if (res.detail.errMsg == 'getUserInfo:ok') {
      //成功授权 返回上个页面
      console.log("授权" + that.data.stateName + '成功')
      wx.navigateBack({
        delta: 1,
      })
    }

  }

})