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