小程序学习(十一)

微信小程序如何获取用户头像和呢称

在学习开发微信小程序的过程中，假设用户登录后要如何获取到他的头像和呢称呢？在这几天的学习中，根据掌握到的知识，写了这篇文章来供有同样问题的朋友做一个简单的参考。
关于如何获取用户信息，在微信开发文档中有相关属性的介绍，


根据查找资料，对有关代码的编写如下:
.wxml

<view >
<view class="info">
  <image class="avatar" src='{{userInfo.avatarUrl}}'></image>
  <view class="nickname">{{userInfo.nickName}}</view>
</view>
</view>

.wxss

.info{
   display: flex;
  flex-direction: column;
  align-items: center;
  }
  .avatar{
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

在这里需要注意，在对图片格式进行设置时，如果不加上 **border-radius: 50%**这句代码，所呈现的图片就是一个正方形头像，达不到想要的效果。
.js部分代码

Page({
  data: {
      userInfo: {
      avatarUrl: "",
      nickName: "",
    }
  },
  add_address_fun: function () {
    wx.navigateTo({
      url: 'add_address/add_address',
    })
  },

进行如上设置后，可得到这样的效果：