2022年12月份最新小程序头像昵称获取方式

小程序头像昵称获取方式又双叒改变了，自小程序基础库2.21.2开始，小程序开始废弃wx.getUserProfile接口，新提交的小程序从此接口获取的头像昵称均变为默认头像和昵称，这对于一个开发了几百款小程序的老猿来说，无疑是个晴天霹雳，没办法，谁让我们是苦逼程序员呢，只能跟着官方大大的步伐前进

此次更新官方对于用户的隐私保护更进一层，允许用户自己选择是否填写头像昵称，官方为开发者提供了头像昵称填写能力，将场景设置为用户以自愿填写资料的方式来完善头像昵称。

首先是填写昵称，需要使用button组件，将button组件的open-type值设置为chooseAvatar即可，另外提供了bindchooseavatar来进行头像填写事件的回调，注意在bindchooseavatar事件的回调中，返回的是一个临时路径，而不是像以前那样返回一个永久链接，因此开发者需要自己处理将头像上传到后端以获得永久保存

<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,
    })
  }
})

在一个就是昵称的填写，昵称填写用到了input输入框，将type设置为nickname微信即在键盘上方提供用户昵称的快速填入，当然用户也可以选择填写其他昵称，有一个需要注意的点是使用input组件的输入监听是监听不到用户的填写的，因此需要使用到form组件的bindsubmit方法进行监听

<form bindsubmit="submit">
        <input type="nickname" name="nickname" class="weui-input" placeholder="请输入昵称" />
        <button class="confirm" form-type="submit">确定</button>
    </form>

最后在将用户填写的头像和昵称上传到后台即可绑定用户的头像昵称啦

需要示例代码的可以下载我的资源 小程序头像昵称填写示例代码-Javascript文档类资源-CSDN文库