要实现的效果
- 在用户进入个人中心，直接弹出获取用户信息弹窗
- 以前能够直接弹出授权弹窗
- 现在需要点击一个按钮后才弹出授权弹出
- 显示圆形的用户头像
如何获取用户信息？
官方文档链接
授权弹窗
官方获取用户信息文档调整
为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。正式版暂不受影响。
也就是以前的 wx.getUserInfo 不直接弹出授权窗口了，而且在新版中调用会直接返回fail，现在的做法呢就是通过点击一个button 去实现用户授权功能。
通过点击按钮去授权这也是大部分开发者不愿接受的，毕竟在页面中添加一个按钮太不和谐了，但是在微信的地盘，还是得按着人家的套路走。
文档中说明了有两种方式能够获取用户信息
- 一个是利用
open-data获取公开的用户信息
open-data type="userNickName" lang="zh_CN"/open-dataopen-data type="userAvatarUrl"/open-dataopen-data type="userGender" lang="zh_CN"/open-data- 另一个是利用
button组件将open-type指定为getUserInfo类型
!-- 需要使用 button 来授权登录 -- button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo"授权登录/button view wx:else请升级微信版本/viewPage({ 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 中实现圆形头像
直接贴代码了
view class='amountBg' view class='img' open-data type="userAvatarUrl"/open-data /view view class='account' view class='nick-name' open-data type="userNickName" lang="zh_CN"/open-data /view view class='address' open-data type="userCountry" lang="zh_CN"/open-data· open-data type="userProvince" lang="zh_CN"/open-data· open-data type="userCity" lang="zh_CN"/open-data /view /view/viewcss 样式如下：
.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 属性
