微信小程序-获取用户已授权权限的方法封装及详细使用

项目背景

小程序有地图打卡的功能, 需要判断用户的位置是否在打卡范围内(判断用户位置见下篇博客), 那么就涉及到用户是否授权获取位置的权限, 如果询问权限的时候用户直接点击了允许, 那万事大吉, 在需要位置的地方直接用 wx.getLocation 去获取用户位置就可以了, 但是如果用户点击了拒绝, 就需要用户手动去打开权限, 我们才可以拿到位置, 因此, 我们需要判断用户是否授权了这个权限

就想着是不是可以封装一个方法, 用来检测用户是否授权了某些权限

方法封装

function getUserPermission(permissionName) {
  return new Promise((resolve, reject) => {
    wx.getSetting({
      success(res) {
        if (res.authSetting[permissionName]) {
          resolve(true);
        } else if (res.authSetting[permissionName] === false) {
          reject(false);
        } else {
          wx.authorize({
            scope: permissionName,
            success() {
              resolve(true);
            },
            fail() {
              reject(false);
            }
          });
        }
      },
      fail() {
        reject(false);
      }
    });
  });
}

该方法用Promise风格封装, 首先会检测用户是否同意授权某项功能, 如果没有, 则询问用户是否同意授权小程序使用某项功能

🧐如何使用

const { getUserPermission } = require('../../utils/utils');

Page({
  checkUserHavePermission() {
    getUserPermission('scope.userLocation').then(() => {
      // 用户已授权获取地理位置
      this.getUserLocation(()=>{
        // 获取位置 进行其他操作
      })
    }).catch(() => {
      // 用户未授权/拒绝获取地理位置
      // 需要提示用户手动打开设置去授权
      this.openSettingPop(); // 打开提示弹窗
    })
  },
})

其中, 如果没有该权限, 会去询问用户进行授权, 但是如果之前用户已经拒绝授权, 那么就需要用户手动授权该权限
具体流程:

1. 弹窗提示用户去授权
2. 用户点击去设置, 弹出权限页面
3. 用户设置完之后退出, 根据用户选择的结果进行相关的操作

其中, 要想打开设置, 需要注意的是, 如果用户没有授权该权限, 我们不能直接打开设置页面让用户设置, 因为微信有规定, 只能引导用户自己去打开设置页面, 也就是说, 必须有一个按钮, 让用户自己去操作, 所以微信提供了一个button组件的 open-type="openSetting" 用来打开权限设置页面

用户设置权限

<van-overlay z-index="6" show="{{ showSettingPop }}">
  <view class="overlay-box show-flex-box-c show-flex-center">
    <view class="confirm-box show-flex-box-c">
      <text class="title">提示</text>
      <text class="des">检测到您没打开获取位置功能权限，是否去设置打开?</text>
      <view class="btn-bar show-flex-box-r">
        <view class="btn" bindtap="closeSettingPop">取消</view>
        <view class="bind-phone-btn" bindtap="closeSettingPop">
          <button
            open-type="openSetting"
            bindtap="openSetting"
          >前往设置</button>
        </view>
      </view>
    </view>
  </view>
</van-overlay>

openSetting(){
    const that = this;
    wx.openSetting({
      success: (res) => {
        if (res.authSetting['scope.userLocation']) {
          // 用户在设置中点击了允许，调用选择位置信息函数
          that.getUserLocation(()=>{
            that.reqStoreList(true);
          })
        } else {
          // 用户在设置中点击了不允许，展示拒绝授权信息
          wx.showToast({
            title: '你拒绝了授权，无法操作内容',
            icon: 'none',
            duration: 3000,
          }) // 你拒绝了授权，无法操作内容'
        }
      },
      fail: (err) => { }
    })
  },

效果如下:

🎉🎉
以上就是整个流程
欢迎大家一起讨论学习😊~