微信小程序獲取用戶頭像有兩種方式：


一種是通過調(diào)用wx.getUserInfo方法，從userInfo字段中解析出avatarUrl。


另一種是通過open-data組件，直接將用戶頭像顯示在頁(yè)面指定位置。



針對(duì)第二種方法，無法使用border-radius:50%來設(shè)置頭像圓角，需要使用clip-path: circle(50rpx at center);進(jìn)行四周的剪裁，具體代碼示例如下：



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


注：


1. open-data組件依賴的小程序基礎(chǔ)庫(kù)版本號(hào)最低為1.9.90


2. clip-path CSS 屬性可以對(duì)元素的部分區(qū)域進(jìn)行裁剪(隱藏)。


 


 


 


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


5.8修改


針對(duì)屬性border-radius:50%，實(shí)際也可以奏效，需要配合overflow:hidden來使用，完整代碼：



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

以上是由福州網(wǎng)站建設(shè)的小編為你分享了"微信小程序open-data userAvatarUrl圓角顯示"文章，如果你在這方面有什么問題，隨時(shí)聯(lián)系我們