所以我們得到結(jié)論：小程序open-data中的頭像，我們是不能對其做圓角之類的處理。

那么，我們怎樣才能做到在沒有獲取授權(quán)時 拿用戶頭像顯示 并做圓角呢？

目標(biāo)效果：

下面就是我的處理方式：

1. 實(shí)現(xiàn)邏輯：頭像做絕對布局，并在其上面覆蓋一個中間鏤空的view設(shè)置view的邊界足夠遮擋住頭像非圓形部分，且鏤空view邊界顏色需要跟周圍背景顏色一樣，這樣就實(shí)現(xiàn)了偽圓角。

2. 實(shí)現(xiàn)代碼：

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>

這樣就大體實(shí)現(xiàn)了！

有些人實(shí)現(xiàn)效果可能是這樣：

這種情況要改成跟目標(biāo)效果一樣只需要調(diào)整一下view的邊界寬度和邊界顏色就可以了：