Wechat applet to obtain user avatar and nickname, click to obtain user avatar nickname city and other information, latest summary of user avatar nickname

In the past, wx.getUserInfo would pop up a pop-up window for the user, which required user authorization.
Now a click event is needed to trigger wx.getUserInfo

wx.getUserInfo({
    
    
      success:function(res){
    
    
        console.log(res);
        var avatarUrl = 'userInfo.avatarUrl';
        var nickName = 'userInfo.nickName';
        this.setData({
    
    
          [avatarUrl]: res.userInfo.avatarUrl,
          [nickName]:res.userInfo.nickName,
        })
      }
    })

1. Only display the user's avatar and nickname without using the
Open-data tag to directly obtain the avatar and nickname without user authorization

<open-data type="userAvatarUrl"></open-data>    //获取用户头像直接显示在小程序中
<open-data type="userNickName" lang="zh_CN"></open-data>    //获取用户昵称直接显示在小程序中

2. Click to get user avatar nickname data

<view>
  <button open-type='getUserInfo' lang="zh_CN" bindgetuserinfo="onGotUserInfo">用户</button>
  <text class="txtname">{
    
    {
    
    username}}</text>
  <image class="tximg" mode="widthFix" src="{
    
    {userimg}}" />
</view>

  data: {
    
    
    username: '',
    userimg: ''
  },
  // 获取用户头像昵称城市等信息
  onGotUserInfo: function (e) {
    
    
    console.log(e);
    this.setData({
    
    
      username: e.detail.userInfo.nickName,
      userimg: e.detail.userInfo.avatarUrl
    })
  },