专栏首页Bug生活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 {
     //具体实现逻辑,加载数据
     ...
  }
});  

总结

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

本文分享自微信公众号 - Bug生活2048(BugLife2048),作者:玄冰

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-04-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • .net core下对于Excel的一些操作及使用

    对于后台相关的管理系统,Excel导出是基本的功能,下面就简单说下实现该功能的代码实现吧

    Bug生活2048
  • 告别单调工作系列——利用python再次拯救漂亮妹子

    记得帮妹子搞定自动提交表单之后的第三天,妹子端着奶茶乐呵呵的来找我,和我一番畅谈理想,又指点江山之后,终于切入了正题。

    Bug生活2048
  • 虚拟与现实,带你了解各种Reality

    我相信大家都听说过这几个名词:VR、AR、MR、CR,但是有时候又很难区分,下面我再来介绍下。

    Bug生活2048
  • Android开发笔记(四十五)手势事件

    基本的手势事件主要有如下三个方法: dispatchTouchEvent : 判断该事件是否需要下发。返回true表示需要下发给下级视图,返回false表...

    用户4464237
  • 如何在spark里面使用窗口函数

    在大数据分析中,窗口函数最常见的应用场景就是对数据进行分组后,求组内数据topN的需求,如果没有窗口函数,实现这样一个需求还是比较复杂的,不过现在大多数标准SQ...

    我是攻城师
  • OpenCV视频后期防抖实战

    点播、直播行业的蓬勃发展,使用户生产视频(UGC)逐渐替代了专家生产和平台生产的方式,成为了主流。由于广大用户不可能全都具备专业素质和专业器材,其产出的视频往往...

    大福加冰
  • Js微信公众号引JS-SDK调起微信支付

    任我行RQ
  • 有效感受野

    Understanding the Effective Receptive Field in Deep Convolutional Neural Network...

    用户1148525
  • [WCF权限控制]ASP.NET Roles授权[下篇]

    在采用Windows认证的情况下,使用基于Windows用户组安全主体权限模式是一个不错的选择。我们可以直接使用现有的用户组设置,也可以为相应的应用或服务创建单...

    蒋金楠
  • [WCF权限控制]ASP.NET Roles授权[上篇]

    在采用Windows认证的情况下,使用基于Windows用户组安全主体权限模式是一个不错的选择。我们可以直接使用现有的用户组设置,也可以为相应的应用或服务创建单...

    蒋金楠

扫码关注云+社区

领取腾讯云代金券