小程式之open-data userAvatarUrl頭像做圓角

kaysen發表於2018-06-02

小程式可以在沒有授權時是可以獲取微信頭像的資訊顯示的，即通過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 userAvatarUrl頭像做圓角
所以我們得到結論：小程式open-data中的頭像，我們是不能對其做圓角之類的處理。

那麼，我們怎樣才能做到在沒有獲取授權時 拿使用者頭像顯示 並做圓角呢？

目標效果：

小程式之open-data userAvatarUrl頭像做圓角
下面就是我的處理方式：

  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>
複製程式碼

這樣就大體實現了！

有些人實現效果可能是這樣：

小程式之open-data userAvatarUrl頭像做圓角

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

小程式之open-data userAvatarUrl頭像做圓角

優化

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

程式碼優化如下：

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

複製程式碼
.headView .icon {
    height: 180rpx;
    width: 180rpx;
    border-radius: 50%;
    overflow：hidden;//只需要新增這句 把溢位部分隱藏就可以了
}
複製程式碼
只需要新增這句 overflow：hidden; 把溢位部分隱藏就可以了

感謝提醒，如有哪裡需要改進的 多多指教

相關文章