微信小程序 type="nickname" 点击后，获取不到最新值

在uniapp开发微信小程序，或是使用小程序开发平台开发，会涉及到获取用户的头像和昵称，而在最新的 微信小程序基础库，getUserInfo等不能在获取这些信息，官方推荐使用 头像昵称填写能力（基础库 2.21.2 版本开始支持，覆盖iOS与安卓微信 8.0.16 以上版本），下面讲讲我在使用过程中遇到的问题。

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}"></image>
</button> 
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }
})

在获取用户昵称时，选择自己的微信昵称后，点击确认，可以发现拿不到当前微信昵称。

下面就说说我爱hi如何解决的 在 input 中使用 change 事件

<input type="nickname" v-model="userInfo.userName" @change="onChooseName" placeholder="请输入昵称" />

编写 js 代码

// 获取用户昵称
const onChooseName = (e) => {
   // userInfo.userName=e.detail.value;
}

这样就解决上述问题，如果认可我的方法，请留下你的赞赞！