官方调整

平台计划从2022年2月21日24时起回收通过<open-data>展示个人信息的能力，若小程序需收集用户昵称头像等信息，可以通过 头像昵称填写功能 功能进行收集。具体回收方式为：

1. 头像展示 灰色头像

2. 用户昵称展示“微信用户”

3. 用户性别、地区、语言展示为为空（“”）

小程序通过<open-data>展示群名称能力保留，平台会针对小程序生命周期内首次调用该组件展示群名称向用户提示："群名称仅你可见，小程序无法获取。"

造成的结果就是，当我们使用 wx.getUserProfile(Object object)、wx.getUserInfo(Object object) 返回的结果 userInfo 中，我们拿到的头像地址和昵称是一个默认的灰色头像和统一的“微信用户”。

调整地址：「链接」

那如果我们确实想要用户的这两个信息，又该如何来获取呢？

微信官方也想到这点，另外提供了API供我们使用，不过相当于我们需要用户手动来确认授权，来让我们获取真实的信息。

更新头像

原生小程序中，组件 button 的属性open-type 的值设置为 chooseAvatar，然后通过 bindchooseavatar 事件回调获取到头像信息的临时路径。原生小程序就不介绍了，官方文档中有，文章最后会贴出对应地址，有兴趣同学可以去看看。这里主要介绍 Taro 中的使用：

// 事件
const onChooseAvatar = (e) => {
  // 注意：e.details.avatarUrl 只是一个临时的地址，
  // 需要上传到服务器上获取一个可以访问地址，否则可能下次使用时，头像就无法正常显示了
	setState({ avatarUrl: e.details.avatarUrl })
}

// 视图部分
<Button
	open-type='chooseAvatar'
  onChooseAvatar={onChooseAvatar}
 >
    <Image src={avatarUrl} mode='scaleToFill' />
 </Button>

注意：onChooseAvatar 事件，对应的 Taro 版本一定要是较新的版本，之前我的版本是 3.4.2，试了很久都不支持该方法，最后升级版本到最新 3.6.1，才显示有，因为我没有试这中间版本是否可行，大家在遇见了此问题几句可以选择升级版本。

更新昵称

将 input 组件 type 的值设置为 nickname，当用户在此 input 进行输入时，键盘上方会展示微信昵称。但是，虽然也有对应的事件 bindnicknamereview，但事件却不会返回微信昵称，如果手动输入的话我们可以监听 input 事件来获取，如果是直接选择了微信昵称，那我们可以通过以下方法获取。

// 事件部分
const querySelector = useRef()

useEffect(() => {
  // 使用 nextTick 是看见有些说在组件挂载试，并不能获取到对应的节点信息
  // 因此，在 nextTick 中来获取，也看见有使用 setTimeout 来实现的。
	Taro.nextTick(() => {
    querySelector.current = Taro.createSelectorQuery()
  })
}, [])

const onInput = (e) => {
	setState({ nickName: e.detail.value })
}

const onNickNameReview = () => {
  // properties 中的属性我们设置 value，这样在返回我们就可以拿到值
  querySelector.current?.select('#nickName').fields({ properties: ['value'] }, (res) => {
    setValues((prevState) => ({ ...prevState, nickName: res?.value }))
  }).exec()
}

// 视图部分
<Input id="nickName" onInput={} onNickNameReview={onNickNameReview} />

总结

以上就是头像和昵称的获取方式，希望可以帮助到有需要的朋友们。

附上官方头像、昵称获取文档：头像昵称填写 | 微信开放文档