微信小程序版博客——小程序授权登陆的一点优化

由于小程序wx.getUserInfo接口的调整,本文章中相关代码已经不再适用,关于授权登录可以参考微信小程序版博客——授权登录的修改(wx.getUserInfo)

在上几篇文章中,我的小程序版博客已经完成了列表页、专题页、详情页,本文主要记录下授权登陆的插曲,提升下用户体验。

授权登陆流程

通常授权登陆在第一次登陆小程序时提示,但很多用户会拒绝,接下来的流程就比较尴尬了。

我的想法是,当用户第一次打开小程序时,会提示授权登陆,但拒绝没有关系,依旧能加载首页列表页,专题页。

但当点进去需要阅读文章时就需要再次提醒授权,不然无法阅读,同时回到列表页,当同意时刷新页面正常加载。

具体效果大致如下:

当用户第一次打开小程序,提示授权,但当用户拒绝时依旧可以加载列表页让用户浏览。

image

当用户选择具体某一篇文章时,重新验证授权,并友好提示:

image

当用户选择时进入设置,设置成功后正常浏览文章,否则跳回到列表页

image

具体实现

这里主要用到了wx.login,wx.getUserInfo,wx.openSetting这三个API,可以先根据官方文档熟悉下。

因为授权获取用户基本信息一旦拒绝之后小程序就不会再出现授权窗口,所以之后的授权需要通过wx.openSetting来实现。

getUserInfo: function (loginType, cb) {
    var that = this
    if (this.globalData.userInfo) {
      typeof cb == "function" && cb(this.globalData.userInfo, true);
    } 
    else {
      //1.调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo;
              typeof cb == "function" && cb(that.globalData.userInfo, true);
            },
            fail: function () {
              //2.第一次登陆不强制授权,直接返回
              if (loginType == 0) {
                typeof cb == "function" && cb(that.globalData.userInfo, false);
              }
              else {
                //3.授权友好提示
                wx.showModal({
                  title: '提示',
                  content: "您还未授权登陆,部分功能将不能使用,是否重新授权?",
                  showCancel: true,
                  cancelText: "否",
                  confirmText: "是",
                  success: function (res) {
                    //4.确认授权调用wx.openSetting
                    if (res.confirm) {
                      if (wx.openSetting) {//当前微信的版本 ,是否支持openSetting
                        wx.openSetting({
                          success: (res) => {
                            if (res.authSetting["scope.userInfo"]) {//如果用户重新同意了授权登录
                              wx.getUserInfo({
                                success: function (res) {
                                  that.globalData.userInfo = res.userInfo;
                                  typeof cb == "function" && cb(that.globalData.userInfo, true);
                                }
                              })
                            } else {//用户还是拒绝
                              typeof cb == "function" && cb(that.globalData.userInfo, false);
                            }
                          },
                          fail: function () {//调用失败,授权登录不成功
                            typeof cb == "function" && cb(that.globalData.userInfo, false);
                          }
                        })
                      } else {
                        typeof cb == "function" && cb(that.globalData.userInfo, false);
                      }
                    }
                    else
                    {
                      typeof cb == "function" && cb(that.globalData.userInfo, false);
                    }
                  }
                })
              }
            }
          })
        }
      })
    }
  },

在文章详情页onload时直接调用上面的方法:

//回调方法中实现具体逻辑
app.getUserInfo(1,function(userInfo,isLogin) {
  //没有授权直接返回上一页
  if (!isLogin) {
    wx.navigateBack();
  }
  else {
     //具体实现逻辑,加载数据
     ...
  }
});  

总结

体验很重要,一天优化一点点,那才会慢慢变成产品

作者:玄冰
欢迎关注我的微信公众号和博客小程序
欢迎关注我的公众号 欢迎关注我的公众号