【总结】微信小程序 - 用户授权时被拒绝的解决办法(授权失败场景处理)

因为当下在做的小程序功能必须获取用户信息才能操作，所以在index页面就弹用户授权了，此处参考了【这篇文章】。文章中提到一点开小程序就弹用户授权多少会对用户造成一定的心里压力，所以大家还是按照自己的需要来。如果有不一样的思路欢迎交流 :)

1.被拒绝之后…

首先在首页拒绝了授权之后呢，会拉起一个模态弹窗，这点和上边那篇文章中一样的。
app.js中改写一下getUserInfo这个函数

getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            },
            fail: function(){
              wx.showModal({
                title: '用户未授权',
                content: '如需正常使用小程序功能，请按确定并且在【我的】页面中点击授权按钮，勾选用户信息并点击确定。',
                showCancel: false,
                success: function (res) {
                  if (res.confirm) {
                    console.log('用户点击确定')
                  }
                }
              })
            }
          })
        }
      })
    }
  }

如果用户拒绝了授权，则会弹出：
这里写图片描述

2. 引导用户到授权按钮

上步中已经提到，需要用户到另一个tab中再点击一个按钮，为什么要这么设置呢。主要是因为单单靠用户点击右上角来设置这个授权有那么一些麻烦，因为需要经以下这些步骤：

用户点击右上角【…】
关于XXX(小程序的名称)
再点击右上角【…】
选择设置
打开用户信息

……一看到就已经想手动再见了
所以我选择在【我的】这个tab中添加一个用户未授权时才能看到的button，点击了这个神奇的button，就能再次选择是否授权。
这个button暂时长这样：
这里写图片描述
先别急着吐槽按钮丑，看码：
我在这个页面中首先加了一个叫做noAuthorized的变量，它的默认值是true，代表【是的，就是没授权咋地了？】

给这个按钮绑定的事件：

tapToAuthorize: function(){
    //再授权
    wx.openSetting({
      success: (res) => {
        /*
         * res.authSetting = {
         *   "scope.userInfo": true,
         *   "scope.userLocation": true
         * }
         */
         //因为openSetting会返回用户当前设置，所以通过res.authSetting["scope.userInfo"]来判断用户是否勾选了【用户信息】这一项
        if (res.authSetting["scope.userInfo"]===true){
          var that = this
          app.getUserInfo(function (userInfo) {
            //更新数据
            that.setData({
              userInfo: userInfo,
              noAuthorized: false
            })
          })
        }
        else{
          wx.showModal({
            title: '用户未授权',
            content: '如需正常使用小程序，请点击授权按钮，勾选用户信息并点击确定。',
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击确定')
              }
            }
          })
        }
      }
    })
  }

如此前提到的文中所说，小程序提供了wx.openSetting(OBJECT)和wx.getSetting(OBJECT)，前者可以调起客户端小程序设置界面，返回用户设置的操作结果，后者可以获取用户当前设置。由于此处已经调用了openSetting可以返回操作结果进行判断，所以第二个就用不上了。

效果如下：

点击授权按钮后，先弹出：
如果勾选了用户信息并点击了确定，则setdata后页面刷新，按钮消失，显示用户头像昵称等信息。
如果没有勾选又点击了确定，则再次弹出模态弹窗，提示授权的重要性：

完成撒花

扫描二维码关注公众号，回复： 3254208 查看本文章

3.总结

总觉得一直在用比较暴力的手法让用户授权是不太好的一件事情，但是确实由于产品定位的原因，缺少了用户的信息什么功能都用不了，才无奈出此下策。
不过今天也是学到了很多有关小程序的button还有setting相关的一些东西，很开星。
也希望各位看官有美好的一天嗷，大家一起学习进步 XD~