微信小程序-获取用户昵称和头像

.wxml

<view class='login_view'>
    <image class='touxiang' src="{{avatarUrl}}"></image>
    <text class='nickName'>{{nickName}}</text>
</view>

<button type='primary' bindtap="login">微信登录</button>

.wxss

.login_view{
    margin:150rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.touxiang{
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;     /*图片即可显示成圆形*/
    margin-top: 30rpx;
}

.nickName{
    margin: 30rpx;
}

.js

Page中添加：

    /**
     * 页面的初始数据
     */
    data: {
        bLogin: false,
        nickName:'慧石科技',
        avatarUrl:'../../images/慧石科技.jpg',
    },
    login(){
        let that = this;
        wx.getUserProfile({
          desc: 'desc',
          success: res=> {
            GetUserInfo(res.userInfo);
            that.setData({  // 一定要在此改变值，才能重新渲染界面
                bLogin: userInfo.bLogin,
                nickName: userInfo.nickName,
                avatarUrl: userInfo.avatarUrl,
            })
            wx.showToast({
              title: '登录成功！',
              icon: 'success',
              duration: 3000,
            })
          },
          fail: err=> {
            wx.showToast({
              title: '获取用户信息失败！',
              icon: 'error',
              duration: 3000,
            })
          }
        })
    },

界面效果：