小程序获取用户的登录头像和用户名

小程序获取用户的登录头像和用户名

本案例可加小程序交流群在文件中获取本例代码。（找到今日日期就可以找到本文件）。本案例复制有可能会报错。因为标点有可能报错。只做参考

WXML:

<view class="page-body-info">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="btn-area">
  <button type="primary" bindtap="getUserInfo">获取用户信息</button>
</view>

WXSS:

.page-body-info {
  padding-bottom: 0;
  height: 230px;
}
.userinfo-avatar {
  border-radius: 128rpx;
  width: 128rpx;
  height: 128rpx;
}
.userinfo-nickname {
  margin-top: 20rpx;
  font-size: 38rpx;
}

JS:

Page({
  data: {
  },
  getUserInfo: function () {
    var that = this
    _getUserInfo();
    function _getUserInfo() {
      wx.getUserInfo({
        success: function (res) {
          that.setData({
            userInfo: res.userInfo
          })
          that.update()
        }
      })
    }
  }
})