小程序之open-data userAvatarUrl頭像作圓角

小程序能夠在沒有受權時是能夠獲取微信頭像的信息顯示的，即經過open-data獲取顯示，頭像的type爲userAvatarUrl。

//頭像顯示的寫法
<open-data type='userAvatarUrl'></open-data>
複製代碼

接下來咱們會給頭像加個佈局class和mode,那麼代碼就會變成這樣：

//添加class、mode
<open-data class='icon' mode='aspectFit' type='userAvatarUrl'></open-data>

複製代碼

.headView .icon {
    height: 180rpx;
    width: 180rpx;
    border-radius: 50%;
}
複製代碼

這是咱們會發現咱們雖然class裏有作圓角，但是沒有起做用：

因此咱們獲得結論：小程序open-data中的頭像，咱們是不能對其作圓角之類的處理。

那麼，咱們怎樣才能作到在沒有獲取受權時 拿用戶頭像顯示 並作圓角呢？

目標效果：

下面就是個人處理方式：

1. 實現邏輯：頭像作絕對佈局，並在其上面覆蓋一箇中間鏤空的view設置view的邊界足夠遮擋住頭像非圓形部分，且鏤空view邊界顏色須要跟周圍背景顏色同樣，這樣就實現了僞圓角。

2. 實現代碼：

wxss:

.headView {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50rpx;
    height: 300rpx;
    width: 750rpx;
    position: relative;
}
/**
*open-data 的頭像作不了圓角
*這裏是覆蓋一個鏤空的view在上面 鏤空view的邊界作成與周圍背景顏色同樣 作了僞圓角
**/
.headView .icon {
    position: absolute;
    height: 180rpx;
    width: 180rpx;
    border-radius: 50%;
    border: 50rpx solid #f1f1f1;
}
複製代碼

wxml:

<view class='headView'>
    <open-data class='icon' mode='aspectFit' type='userAvatarUrl'></open-data>
    <view class='icon'/>
</view>
複製代碼

這樣就大致實現了！

有些人實現效果多是這樣：

這種狀況要改爲跟目標效果同樣只須要調整一下view的邊界寬度和邊界顏色就能夠了：

優化

感謝讀者的提醒，因爲本人基礎進階階段以及以前實現時考慮不夠，上面的實現方式把問題複雜化了。

代碼優化以下：

<open-data class='icon' mode='aspectFit' type='userAvatarUrl'></open-data>

複製代碼

.headView .icon {
    height: 180rpx;
    width: 180rpx;
    border-radius: 50%;
    overflow：hidden;//只須要添加這句 把溢出部分隱藏就能夠了
}
複製代碼

只須要添加這句 overflow：hidden; 把溢出部分隱藏就能夠了

感謝提醒，若有哪裏須要改進的 多多指教