微信小程序版博客——授权登录的修改(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有点大[泪崩],为了好看就只能牺牲下了。

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

截图1

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

截图2

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

//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时,小程序会首先渲染用户中心这个页面,然后发现没有授权,直接一闪而过又跳到授权登录页面,这个不懂有什么方式可以优化的,如果有改善建议还望指教。

原文发布于微信公众号 - Bug生活2048(BugLife2048)

原文发表时间:2018-07-06

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏地方网络工作室的专栏

Python3 初学实践案例(7)tkinter 入门 GUI 的密码生成程序

Python3 初学实践案例(7)tkinter 入门 GUI 的密码生成程序 前面我已经非常好的完成了 cli 的密码生成程序的编写 http://blog....

2828
来自专栏腾讯NEXT学位

服务端渲染 vs 客户端渲染

4426
来自专栏Google Dart

AngularDart4.0 英雄之旅-教程-07路由 顶

如果该应用程序尚未运行,请启动该应用程序。 在进行更改时,请通过重新加载浏览器窗口来保持运行。

1853
来自专栏前端之路

–[New]Vue项目使用vw实现移动端适配教程

2053
来自专栏有趣的django

python爬虫入门(五)Selenium模拟用户操作

爬虫(Spider),反爬虫(Anti-Spider),反反爬虫(Anti-Anti-Spider) 之间恢宏壮阔的斗争... 小莫想要某站上所有的电影,写了...

6523
来自专栏HT

基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)

今天没有延续上一篇讲的内容,穿插一段小插曲,WebSocket 实时数据通讯同步的问题,今天我们并不是很纯粹地讲 WebSocket 相关知识,我们通过 Web...

2467
来自专栏iOS122-移动混合开发研究院

写给iOS小白的MVVM教程(序)

这几天,需要重构下部分代码,这里简要记录下.但是涉及的技术要点还是很多,所以分为多个篇章叙述.此教程来源于,并将于应用于实践,不做过多的概念性阐释和争论.每个篇...

20710
来自专栏DeveWork

WordPress 网站开发“微信小程序”实战(四)

本站微信小程序版“DeveWork极客”在中文WP 圈子可谓是一直被模仿,从未被超越。如今快速迭代,写作本文的现在是1.6 版本。作为“WordPress 开发...

2776
来自专栏CRPER折腾记

React 折腾记 - (1) React Router V4 和antd侧边栏的正确关联及动态title的实现

collapsed,onCollapse这些是控制侧边栏缩小的,接受的是外部的props

4103
来自专栏PHP在线

表单提交刷新页面问题

今天开发中遇到了一个问题,刚开始没有头绪,不知道怎样解决,后来静下来一想,搜索下吧,经过搜索相关资料,很好的解决。 <form name="keywordFor...

3616

扫码关注云+社区

领取腾讯云代金券