微信小程序最新获取头像和昵称的方法 直接用！

调整背景

微信小程序获取用户头像和昵称一个开放接口是wx.getUserInfo，2021年4月5日被废弃，原因是很多开发者在打开小程序时就通过组件方式唤起getUserInfo弹窗，如果用户点击拒绝，无法使用小程序，这种做法打断了用户正常使用小程序的流程，同时也不利于小程序获取新用户，后面新添加的一个开放接口wx.getUserProfile，也是用于获取用户头像和昵称

关于wx.getUserProfile

但2022 年 10 月 25 日 24 时后（以下统称 “生效期” ），用户头像昵称获取规则将进行如下调整

考虑到微信版本的更新，目前开发最好还是使用头像昵称填写能力这个方法来做，废话不多说代码奉上

头像填写

从基础库 2.21.2 开始支持

当小程序需要让用户完善个人资料时，可以通过微信提供的头像昵称填写能力快速完善。

根据相关法律法规，为确保信息安全，由用户上传的图片、昵称等信息微信侧将进行安全检测，组件从基础库2.24.4版本起，已接入内容安全服务端接口（mediaCheckAsync、msgSecCheck），以减少内容安全风险对开发者的影响。

昵称填写

代码示例

1. <view data-weui-theme="{{theme}}">
2. <button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
3. <image class="avatar" src="{{avatarUrl}}">image>
4. button>
5. <form catchsubmit="formSubmit">
6. <view class="row">
7. <view class="text1">昵称：view>
8. <input type="nickname" class="weui-input" name="nickname" placeholder="请输入昵称"/>
9. view>
10. <button type="primary" style="margin-top: 40rpx;margin-bottom: 20rpx;" form-type="submit">提交button>
11. form>
12. view>

1. .avatar-wrapper {
2. padding: 0;
3. width: 56px !important;
4. border-radius: 8px;
5. margin-top: 40px;
6. margin-bottom: 40px;
7. background-color: #fff;
8. }
10. .avatar {
11. display: block;
12. width: 56px;
13. height: 56px;
14. }
16. .container {
17. display: flex;
18. }
19. .row{
20. border-top: 1px solid #ccc;
21. border-bottom: 1px solid #ccc;
22. display: flex;
23. align-items: center;
24. height: 80rpx;
25. padding-left: 20rpx;
26. }
27. .text1{
28. flex: 2;
29. }
30. .weui-input{
31. flex: 6;
32. }

1. const app = getApp()
2. const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
5. Page({
6. /**
7. * 页面的初始数据
8. */
9. data: {
10. avatarUrl: defaultAvatarUrl,
11. theme: wx.getSystemInfoSync().theme,
13. },
15. onChooseAvatar(e) {
16. const { avatarUrl } = e.detail
18. this.setData({
19. avatarUrl,
20. })
21. app.globalData.userInfo.avatarUrl = avatarUrl
23. },
24. formSubmit(e){
25. app.globalData.userInfo.nickName = e.detail.value.nickname
26. wx.switchTab({
27. url: '/pages/home/index',
28. })
29. },
32. /**
33. * 生命周期函数--监听页面加载
34. */
35. onLoad(options) {
36. wx.onThemeChange((result) => {
37. this.setData({
38. theme: result.theme
39. })
40. })
41. },