WeChat applet: Get user information (nickname and avatar)

The interface for the WeChat applet to obtain user information has been changed several times, and it is recommended to use method 4 directly: wx.getUserProfileObtain

Method 1: open-data display user information不推荐

Component functions are adjusted to optimize user experience, and the platform will recycle the ability to display personal information from 24:00 on February 21, 2022.
If you use this technical service, please adjust the applet in time to avoid affecting the service process. View details:
https://developers.weixin.qq.com/community/develop/doc/000e881c7046a8fa1f4d464105b001

<!-- 如果只是展示用户头像昵称，可以使用 <open-data /> 组件 -->

<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>

Method 2: wx.getUserInfo不推荐

Mini Program login, user information related interface adjustment instructions:
https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801

Page({
    
    
  onLoad: function (options) {
    
    
    this.getUserInfo();
  },
  async getUserInfo() {
    
    
    // 可以直接调用，无需用户授权
    const res = await wx.getUserInfo();
    console.log(res);
  },
});

acquired data

{
    
    
	userInfo{
    
    
		avatarUrl: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"
		city: ""
		country: ""
		gender: 0
		language: ""
		nickName: "微信用户"
		province: ""
	}
}

After calling, it is found that the obtained data is no longer real user data

Method 3: open-type="getUserInfo"不推荐

After calling, it is found that the obtained data is no longer real user data

Bug: In the developer tool, the 2.10.4~2.16.1 basic library version will return real data, and this range on the real device will return anonymous data according to the announcement.
View the announcement:
https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html#Bug-Tip

wxml

<button open-type="getUserInfo"
        bind:getuserinfo="handleGetUserinfo">获取用户信息</button>

js

Page({
    
    
  handleGetUserinfo(e) {
    
    
    console.log(e);
  },
});

output

{
    
    
	detail{
    
    
		userInfo:{
    
    
			avatarUrl: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"
			city: ""
			country: ""
			gender: 0
			language: ""
			nickName: "微信用户"
			province: ""
			}
	}
}

Method 4: wx.getUserProfile推荐

Get user information. It can only be called after the page generates a click event (for example, in the callback of bindtap on the button), and an authorization window will pop up for each request, and userInfo will be returned after the user agrees. This interface is used to replace wx.getUserInfo

Documentation: https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html

User data structure UserInfo: https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/UserInfo.html

<button bindtap="getUserProfile">获取头像昵称</button>

Page({
    
    
  async getUserProfile(e) {
    
    
    const res = await wx.getUserProfile({
    
    
      desc: '用于完善会员资料',
    });
    console.log(res);
  },
});

output

{
    
    
	detail{
    
    
		userInfo:{
    
    
			avatarUrl: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"
			city: ""
			country: ""
			gender: 0
			language: ""
			nickName: "真实昵称"
			province: ""
			}
	}
}