微信小程序版博客——授权登录的修改(wx.getUserInfo)

最近一直忙着项目没有时间打理我的小程序,有网友反馈wx.getUserInfo官方文档中做了一些调整,今天有空看了下文档,果然变了,所以抽时间优化了下代码

思路

之前的授权登录优化这里看下原来的这篇文章,主要是在需要的时候才弹出用户授权,同时通过wx.openSetting来实现用户拒绝后的二次授权,因为授权获取用户基本信息一旦拒绝之后小程序就不会再出现授权窗口。

但现在wx.getUserInfo该接口将不再出现授权弹窗,需要嵌套在button中让用户主动点击授权。

这样原本定义的方法就完全没用了:

getUserInfo: function (loginType, cb) {
    var that = this
    if (this.globalData.userInfo) {
      typeof cb == "function" && cb(this.globalData.userInfo, true);
} 
    
    ......

那只好换个思路啦,当点击需要授权的页面时,我们首先验证全局变量globalData.userInfo是否有值,如果没有,那我们直接跳转到授权页面(authorization),引导用户授权登录,登录成功后再跳转回需要访问的页面。

具体实现

授权登录页面设计

首先需要建个授权登录页面,页面其实很简单,一段引导语和一个授权按钮,但设计下来发现太单调了,于是找了个gif动图,200多kb有点大[泪崩],为了好看就只能牺牲下了。

另外,如果用户不想授权,那此页面没有可操作按钮了,只能退出,这不太友好,所以又加了个返回首页的按钮,整体样式效果如下:

image

同时如果用户点击授权登录后依旧拒绝,在顶部给到一些小提示:

image

这个的话基本上的交互就有了,来看看具体代码:

//wxml:利用canIUse变量去兼容低版本

<view wx:if="{{canIUse}}">
  <view class='zan-font-14 zan-c-gray-dark' style='text-align:center;margin-top:50rpx'>
    允许微信授权后,可体验更多功能</view>
  <view class="zan-btns">
    <button open-type='getUserInfo' bindgetuserinfo="bindGetUserInfo" class="zan-btn zan-btn--primary">授权登录</button>
    <button bindtap='navigateBack' class="zan-btn">返回首页</button>
  </view>
</view>

<view wx:else class='zan-font-16 zan-c-red' style='text-align:center;margin-top:50rpx'>
  您的微信版本过低,请升级后再次体验</view>
  
//js核心代码:其中利用backtype来确认授权登录后跳转回那个页面
bindGetUserInfo: function(e) {
    let backtype = this.data.backType;
    if (e.detail.userInfo) {
      app.globalData.userInfo = e.detail.userInfo
      if (backtype =='index') {
        wx.switchTab({
          url: '../index/index'
        })
      } else if (backtype == 'mine') {
        wx.switchTab({
          url: '../mine/mine'
        })
      } else {
        wx.redirectTo({
          url: '../detail/detail?blogId=' + backtype
        })
      }
    } else {
      this.showZanTopTips('很遗憾,您拒绝了微信授权,宝宝很伤心');
    }
  },

这里注意下,如果跳转的是微信菜单页,记得要用wx.switchTab,详细的可以再看看官方文档,几个跳转的方法去体会下。

这样的话,在需要微信授权的页面去验证下,如果没有登录就可以直接跳转到该页面啦。

//比如用户中心的页面
onLoad: function () {
    let that = this;
    if (!app.globalData.userInfo) {
      wx.redirectTo({
        url: '../authorization/authorization?backType=mine'
      })
    }

    that.setData({
      userInfo: app.globalData.userInfo
    });
  }

其他

由于时间有限,有些代码处理的不是很好,这个大家主要体会下思路和主要方法,时间充裕的情况下还是要注意下自己的编码习惯。

另外就是有个小问题,在页面跳转时总有点小瑕疵,比如我第一次登录,在点击我的菜单Tab时,小程序会首先渲染用户中心这个页面,然后发现没有授权,直接一闪而过又跳到授权登录页面,这个不懂有什么方式可以优化的,如果有改善建议还望指教。

总结

果然,小程序变化还是挺快的,看来有时间还是得多多迭代我的小博客呀,也欢迎有兴趣的小伙伴一起加入。

项目源码地址:https://github.com/CavinCao/ghost-wechat-blog

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 162,158评论 4 370
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,600评论 1 307
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 111,785评论 0 254
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,655评论 0 220
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 53,075评论 3 295
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 41,002评论 1 225
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,146评论 2 318
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,918评论 0 211
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,671评论 1 250
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,838评论 2 254
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,318评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,636评论 3 263
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,343评论 3 244
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,187评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,982评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,126评论 2 285
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,934评论 2 279

推荐阅读更多精彩内容

  • 转载链接 注:本文转载知乎上的回答 作者:初雪 链接:https://www.zhihu.com/question...
    pengshuangta阅读 28,315评论 9 295
  • 程序在18年4月25日做了一次更新,不再支持直接弹出授权信息框 以下为具体获取方式: 获取用户信息(用户信息、获取...
    Sven_qi阅读 11,138评论 0 15
  • 分享下给sublime安装插件的方法。 一、安装Package Control组件 按Ctrl+`调出consol...
    阿布ccc阅读 13,076评论 1 2
  • 一.cocoaPods的安装 我们要用淘宝的Ruby镜像来访问cocoapods,其实我们可以直接安装,只是,中国...
    Code_zhou阅读 363评论 0 2
  • 忽然间想喝酒了, 于是下班买了酒和一些吃的 也许是累了,也许是一些不顺心的事 好吧!喝吧! 听说喝酒解乏! 明天太...
    你好Man大叔阅读 251评论 0 1