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

Bug生活2048

发布于 2018-08-31 15:59:30

4.9K1

发布于 2018-08-31 15:59:30

文章被收录于专栏：Bug生活2048Bug生活2048

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

授权登陆流程

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

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

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

具体效果大致如下：

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

截图1

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

截图2

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

截图3

具体实现

这里主要用到了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 {
     //具体实现逻辑，加载数据
     ...
  }
});

总结

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

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2018-04-28，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自 Bug生活2048 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度