微信小程序~新版授权用户登录例子

要实现的效果

• 在用户进入个人中心，直接弹出获取用户信息弹窗
  • 以前能够直接弹出授权弹窗
  • 现在需要点击一个按钮后才弹出授权弹出
• 显示圆形的用户头像

如何获取用户信息？

官方文档链接

授权弹窗

官方获取用户信息文档调整
为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。正式版暂不受影响。

也就是以前的 wx.getUserInfo 不直接弹出授权窗口了，而且在新版中调用会直接返回fail，现在的做法呢就是通过点击一个button 去实现用户授权功能。

通过点击按钮去授权这也是大部分开发者不愿接受的，毕竟在页面中添加一个按钮太不和谐了，但是在微信的地盘，还是得按着人家的套路走。

文档中说明了有两种方式能够获取用户信息

• 一个是利用 获取公开的用户信息

• 另一个是利用button 组件将 open-type 指定为 getUserInfo 类型

  
  授权登录
  请升级微信版本

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function() {
    // 查看是否授权
    wx.getSetting({
      success (res){
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function(res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
  },
  bindGetUserInfo (e) {
  // 获取到用户信息
    console.log(e.detail.userInfo)
  }
})

< open-data > 中实现圆形头像

直接贴代码了

  
    
  
  
    
      
    
    
      ·
      ·
      
    
  

css 样式如下：

.amountBg {
  display: flex;
  flex-direction: row;
  height: 100px;
  background-color: #5495e6;
  align-items: center;
}

.img {
  overflow: hidden;
  display: block;
  margin-left: 20px;
  width: 49px;
  height: 49px;
  border-radius: 50%;
}

.account {
  width: 70%;
  color: #fff;
  margin-left: 10px;
  align-items: center;
}

.nick-name{
  font-family: 'Mcrosoft Yahei';
  font-size: 16px;
}

.address{
  font-size: 13px;
}
.nav {
  width: 15px;
  color: #fff;
}

参考

CSS display 属性
CSS overflow 属性