微信小程序open-data userAvatarUrl圆角显示

微信小程序获取用户头像有两种方式：

一种是通过调用wx.getUserInfo方法，从userInfo字段中解析出avatarUrl。

另一种是通过open-data组件，直接将用户头像显示在页面指定位置。

<open-data type="userAvatarUrl"></open-data>

针对第二种方法，无法使用border-radius:50%来设置头像圆角，需要使用clip-path: circle(50rpx at center);进行四周的剪裁，具体代码示例如下：

<view class='avatar'><open-data type="userAvatarUrl"></open-data></view>

.avatar{
  width: 100rpx;
  height: 100rpx;
  clip-path: circle(50rpx at center);
}

 

注：

1. open-data组件依赖的小程序基础库版本号最低为1.9.90

2. clip-path CSS 属性可以对元素的部分区域进行裁剪(隐藏)。

 

 

 

--------------------------------------------------------------------------------------------------

5.8修改

针对属性border-radius:50%，实际也可以奏效，需要配合overflow:hidden来使用，完整代码：

<view class='avatar'><open-data type="userAvatarUrl"></open-data></view>

.avatar{
  width: 100rpx;
  height: 100rpx;
  overflow:hidden;  
  border-radius: 50%; 
}