[微信小程序]授权头像修改圆形

“#[微信小程序]授权头像修改圆形”

一.
.wxml

<open-data type="userAvatarUrl" class="userinfo-avatar" mode="cover"></open-data>
<open-data type='userNickName'></open-data>

.wxss

.userinfo-avatar {
  width: 200rpx;
  height: 200rpx;
  margin: 20rpx;
  border-radius: 50%;
  display: flex;
  overflow: hidden;
}

二.
.wxml

<view class='top'>
   <view>
    <open-data type='userAvatarUrl' ></open-data>
   </view>
   <view>
      <open-data type='userNickName'></open-data>
   </view>
</view>

.wxss

.top{
display: flex;
position: absolute;
left: 0;
top: 0;
z-index: 2;
color: white;
font-size: 28rpx;
width: 100%;
height: 30rpx;
line-height: 100%;
}
.top>view:nth-child(1){
width: 200rpx;
height: 200rpx;
border-radius: 50%;
overflow: hidden;
margin-top: 168rpx;
margin-left: 285rpx;
display: block;
}
.top>view:nth-child(2){
height: 100rpx;
margin-left: -180rpx;
margin-top: 390rpx;
color: #9D9D9D;
font-size: 35rpx;
}
.top>view:nth-child(1)>open-data{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}

实例呀~