微信小程序获取头像、昵称的处理方法

一、现象

根据《小程序用户头像昵称获取规则调整公告》

自 2022 年 10 月 25 日 24 时后（以下统称 “生效期” ），

用户头像昵称获取规则将进行调整 ：

通过 wx.getUserInfo 接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”

官方链接： https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01

 

二、解决

TIPS: 基础库 2.21.2 版本开始支持

1、添加点击按钮进行获取头像地址：

官方用例：
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}"></image>
</button> 

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }
})

  TIPS: 假如是基于Uni-app进行开发的小程序，可能你得调整一下绑定的回调方法，@chooseavatar="onChooseAvatar"，如：

<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}"></image>
</button> 

 

2、获取用户昵称：

官方用例：
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>

  TIPS: 假如是基于Uni-app进行开发的小程序，可能你得需要对数据进行绑定一下，添加change方法进行处理，v-model="nickName" @change="onChangeNickname"，如：

<input type="nickname" class="weui-input" placeholder="请输入昵称" v-model="nickName" @change="onChangeNickname" />


data () {
　　return {
　　　　nickName: ''
　　}
},
methods: {
　　onChangeNickname (e) {
　　　　const getNickName = e.detail.value
　　　　if (getNickName) {
　　　　　　this.nickName = getNickName
　　　　}
　　}
}

三、总结

在不同的开发框架中，合理利用当前框架的数据绑定方法。