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

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

其他相关文章：
微信小程序——最新获取用户昵称和头像的方法总结https://blog.csdn.net/weixin_42342572/article/details/80764032