微信小程序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;
}