微信小程序获取用户信息的 开放能力 open-data

.wxml

<view class="userInfo">
  // 用户头像
  <view class="userPic">
    <open-data type="userAvatarUrl"></open-data>
  </view>
  // 用户昵称
  <view class="userName">
    <open-data type="userNickName"></open-data>
  </view>
</view>

.wxss

.userInfo {
  width: 750rpx;
  height: 390rpx;
  text-align: center;
  color: #ccc;
  padding-top: 69rpx;
  background-color: rosybrown;
}
.userPic {
  margin: 0 auto;
  width: 180rpx;
  height: 180rpx;
  overflow: hidden;
  border-radius: 50%;
}
.userName {
  font-family: "微软雅黑";
  font-size: 45rpx;
  margin-top: 45rpx;
}

大概效果：