微信小程序open-data获取用户的信息样式设置

效果图

wxml代码

  <view class="userinfo">
    <!-- 用户头像 -->
    <view class="userinfo-avatar">
      <open-data type='userAvatarUrl'></open-data>
    </view>
    <!-- 用户名称 -->
    <view class="userinfo-NickName">
      <!-- 问候语 -->
      <text>{{greetings}}，</text>
      <open-data type='userNickName'></open-data>
    </view>

wxss代码

.userinfo{
  font-size: 14px;
  border-radius:40%;
}
.userinfo-avatar {
  overflow:hidden;
  display: block;
  width: 64rpx;
  height: 64rpx;
  margin-top: 32rpx;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
.userinfo-NickName{
  margin:-50rpx 0rpx 0rpx 100rpx;
  color: #aaa;
}