微信小程序调整头像和昵称获取规则后，开发者该怎样应对？

向右看齐 2023-09-24 18:13 57阅读 0赞

微信小程序官方在2022年11月9日的时候，出了一则公告，公告内容大概为：开发者不能通过**wx.getUserInfo**接口去获取微信用户头像和昵称了，生效期后发布的插件新版本，通过 wx.getUserInfo 接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”。生效期前发布的插件版本不受影响，但如果要进行版本更新则需要进行适配。通过 wx.login 与 wx.getUserInfo 接口获取 openId、unionId 能力不受影响。因为微信小程序官方为了防止有人不合理收集用户的微信昵称头像，收回了这接口。

然后我们会发现，之前上线的小程序，头像变灰了，昵称也变成了“微信用户”，这对用户体验性来说，简直是致命打击。作为一枚拥有极度强迫症的攻城狮，绝对不能接受这样的情况发生！

针对这一现象，我们怎么来挽救或者规避呢？微信也针对这个问题，做了一些调整，从之前的wx.getUserInfo直接获取，改成了头像昵称填写。开发者呢，则可以根据微信小程序官方指导文档，进行二次处理。

下面是我个人实践的流程和结果：

1、首先前端简单做一个授权界面，因为我是负责后端，前端就简单写一下，同行勿喷！

![4174dc2eb7894fd0b83d272fc439fe03.png][]

授权框代码

2、看一下界面效果

我这里设计的逻辑是用户取消授权就跳回原页面，去授权就弹出微信小程序头像选择框；

![3908a5c6281c4537bbc02cc253ab3c7a.png][]

头像授权

头像选择：

![002bfef1a0f642aeb23ed78663804a69.png][]

去授权微信小程序头像

这里我们不用去管用户到底是取消授权还是用什么头像，只要触发bindchooseavatar 事件，我们监听这个事件函数，拿到头像结果即可。

![9e3eb707bf2e49688a735b503d27474e.png][]

选择微信小程序头像，并监听该事件

拿到头像之后，我们可以提示用户填写昵称，当然，如果没有用到昵称也可以不需要这一步，直接去登录。

![5109450562a94b9d8a13a80118031e58.png][]

提示用户去填写昵称

当用户点击输入框的时候，会自动弹出用户微信昵称，此时用户点击昵称填入。

![e22078292ab948f5afbac34904b89d57.png][]

微信昵称获取

用户也可以自行填写，当然，本着后端不相信前端输入的原则，然后后端逻辑拦截一下输入的文字内容，有敏感词汇的，做拦截提示处理。

![7c3afeea48d743e7b1359222e4a27431.png][]

用户自定义的昵称做名敏感词拦截

获取到头像和昵称后，因为微信提供的头像是一个临时路径，不能作为微信头像的永久路径储存。所以这里需要将头像存入缓存，或者直接传给后端存储。我这里是前端缓存的同时，也传给后端存储了。

![e2946fe73d304b0dafc102b60f3fe23d.png][]

头像昵称获取成功

利用文件上传接口，传给后端处理，去储存或者做别的功能。

![3c7d5597f60145ddbdc765fcaa40653f.png][]

后端存储

这样，我们就可以愉快的接下一个项目了~

![175e33819a7b4e7bad4b10f9274743ba.png][]

头像昵称获取展示

你们又是怎么处理的呢，欢迎留言交流。下期见~

[4174dc2eb7894fd0b83d272fc439fe03.png]: https://img-blog.csdnimg.cn/img_convert/4174dc2eb7894fd0b83d272fc439fe03.png
[3908a5c6281c4537bbc02cc253ab3c7a.png]: https://img-blog.csdnimg.cn/img_convert/3908a5c6281c4537bbc02cc253ab3c7a.png
[002bfef1a0f642aeb23ed78663804a69.png]: https://img-blog.csdnimg.cn/img_convert/002bfef1a0f642aeb23ed78663804a69.png
[9e3eb707bf2e49688a735b503d27474e.png]: https://img-blog.csdnimg.cn/img_convert/9e3eb707bf2e49688a735b503d27474e.png
[5109450562a94b9d8a13a80118031e58.png]: https://img-blog.csdnimg.cn/img_convert/5109450562a94b9d8a13a80118031e58.png
[e22078292ab948f5afbac34904b89d57.png]: https://img-blog.csdnimg.cn/img_convert/e22078292ab948f5afbac34904b89d57.png
[7c3afeea48d743e7b1359222e4a27431.png]: https://img-blog.csdnimg.cn/img_convert/7c3afeea48d743e7b1359222e4a27431.png
[e2946fe73d304b0dafc102b60f3fe23d.png]: https://img-blog.csdnimg.cn/img_convert/e2946fe73d304b0dafc102b60f3fe23d.png
[3c7d5597f60145ddbdc765fcaa40653f.png]: https://img-blog.csdnimg.cn/img_convert/3c7d5597f60145ddbdc765fcaa40653f.png
[175e33819a7b4e7bad4b10f9274743ba.png]: https://img-blog.csdnimg.cn/img_convert/175e33819a7b4e7bad4b10f9274743ba.png