微信小程序获取用户头像和昵称、点击获取用户头像昵称城市等信息、最新获取用户头像昵称总结

以前 wx.getUserInfo 会弹出一个给用户的弹窗，需要用户授权，
现在需要一个点击事件来触发 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.只展示用户头像昵称 不做后台数据库用
Open-data标签 可以不用用户授权直接获得头像和昵称

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

2.点击 获取用户头像昵称数据

<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
    })
  },