微信小程序如何获取微信昵称和头像

<open-data type="userAvatarUrl"></open-data>

之前是使用open-data获取微信昵称和头像，但是更新之后，小程序不再支持使用该方法

现在需要用wx.getUserProfile这个API获取用户信息。页面产生点击事件（如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo。

官方例子：wx.getUserProfile(Object object) | 微信开放文档 (qq.com)

获取用户信息按官方的来即可。但是在登录小程序获取一次后我们需要把用户信息存起来，不能点击一次获取一次。

wxml文件：

  <image class="userinfo-avatar" src="{{avatarUrl}}"></image>
  <text class="userinfo-nickname" bindtap="getUserProfile">{{nickName}}</text>

js文件：

data:{
 avatarUrl:"/utils/img/wdltx.png",//这里放了一张灰色头像图片
 nickName:"点击获取头像和昵称",//用户昵称
}

getUserProfile(){
  wx.getUserProfile({
    desc: '登录', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
    success: (res) => {
      this.setData({
        nickName: res.userInfo.nickName,
        avatarUrl: res.userInfo.avatarUrl
      })
      wx.setStorage({    //数据缓存方法
        key: 'nickName',   //关键字，本地缓存中指定的key
        data: res.userInfo.nickName,    //缓存微信用户公开信息，
        success: function() {      //缓存成功后，输出提示
          console.log('写入nickName缓存成功')
        },
        fail: function() {        //缓存失败后的提示
          console.log('写入nickName发生错误')
        }
      })
      wx.setStorage({    //数据缓存方法
        key: 'avatarUrl',   //关键字，本地缓存中指定的key
        data: res.userInfo.avatarUrl,    //缓存微信用户公开信息，
        success: function() {      //缓存成功后，输出提示
          console.log('写入avatarUrl缓存成功')
        },
        fail: function() {        //缓存失败后的提示
          console.log('写入avatarUrl发生错误')
        }
      })
    }
  })

},

这样数据就缓存成功了。需要注意的是，使用的缓存方法wx.setStorage，那对应的获取数据时也要用wx.getStorage。

如何获取缓存数据：

其他页面js：

data{
nickName:"",
avatarUrl:"",
}

    wx.getStorage({
        key: 'nickName',
        success (res) {
          that.setData({
            nickName:res.data
          })
        }
      })
      wx.getStorage({
        key: 'avatarUrl',
        success (res) {
          that.setData({
            avatarUrl:res.data
          })
        }
      })

这样就可以啦