今天在做小程序的时候突然发现获取用户昵称和头像的时候出现了奇怪的bug（如下图）

检查了n遍代码后还是找不到问题，想着看看以前的代码是怎么写的，结果发现所有的都变成了这种情况，肯定是官方又更新了，经过一系列的查看文档修改后成功解决了问题，现在将解决过程记下来，一是做一个记录，二是希望能帮助到大家

解决过程
第一时间是查看是不是微信又更新了（之前就因为一个bug卡了好长时间，最后发现使用的是旧版本。。。）当更新到最新版本1.05.2103190后，在终端发现了

微信小程序提供了一个新的接口wx.getUserProfile获取用户信息

官方详情文档

重点：wx.getUserProfile不能在onShow或者onLoad里面调用，要在 catchtap或者button的bindtap调用

最终代码

js

Page({
  data: {
    userInfo: null,
    isUser: false
  },
  getUserProfile() {
    wx.getUserProfile({
      desc: '使用户得到更好的体验',
      success: (res) => {
        console.log("获取用户信息成功", res)
        let user = res.userInfo
        wx.setStorageSync('user', user)
        this.setData({
          isUser: true,
          userInfo: user
        })
      },
      fail: res => {
        console.log("获取用户信息失败", res)
      }
    })
  },
  onShow() {
    this.getUserProfile()
    var user = wx.getStorageSync('user')
    if (user && user.nickName) {
      this.setData({
        isUser: true,
        userInfo: user
      })
    }
  }
})

wxml

<view class="header" wx:if="{{isUser}}" bindtap="change">
  <image src="{{userInfo.avatarUrl}}"></image>
  <text>{{userInfo.nickName}}</text>
</view>
<view wx:if="{{!isUser}}">
  <button type="primary" bindtap="getUserProfile">登录</button>
</view>