uniapp 微信小程序 获取用户头像和昵称

一、背景

自2022年10月25日后，小程序 wx.getUserProfile 接口 被收回，通过 wx.getUserInfo 接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”。如需获取用户头像昵称，可以手动获取，具体步骤「头像昵称填写能力」

规则说明指引：

小程序用户头像昵称获取规则调整公告 | 微信开放社区

二、头像昵称填写

头像昵称填写指引：头像昵称填写 | 微信开放文档

2.1、默认状态

2.2、头像选择

①头像选择

将button组件 open-type="chooseAvatar"，当用户选择需要使用的头像之后，可以通过 @chooseavatar 事件回调获取到头像信息的临时路径。

2.2.1、头像选择--具体实现：

当选择头像后就会触发在button上的 @chooseavatar 回调获取到头像信息，在这里可以选择头像拿到图片地址（选择方式：微信头像/相册/拍照），然后将选择的图片上传到接口服务器上去

2.2.2、头像选择--效果展示：

2.3、昵称填写

②昵称填写

将input组件 type 的值设置为 nickname，当用户在此input进行输入时，键盘上方会展示微信昵称。通过input的@blur事件来获取到自己输入的昵称

2.3.1、昵称填写--具体实现：

鼠标点击输入框时就会自动获取自己的微信昵称，利用@blur事件来获取到自己输入的昵称

2.3.2、昵称填写--效果展示：

2.4、完整代码：

说明：消息弹窗 uni.$showMsg 是封装的 uni.showToast(OBJECT) 显示消息提示框。代码中提到的 uni.$showMsg 可直接用 uni.showToast(OBJECT) 代替  uni.showToast(OBJECT) | uni-app官网