微信小程序open-data userAvatarUrl圓角顯示

從年初開始，打開小程序，工具欄都會彈出這個提醒：

 

 

 也就是，默認不彈出授權詢問框，默認獲取不到用戶信息（頭像、昵稱等）！

如果你需要用到這個接口，可以嘗試以下方法：

1、用 button 組件，將屬性名 open-type 設置為 getUserInfo 類型，來吊起授權窗口，獲取用戶基本信息，查看 button 文檔 

<button open-type="getUserInfo" bindgetuserinfo="onGotUserInfo">授權用戶信息</button>

2、直接將，頭像和昵稱的標簽更換成如下，查看 open-data文檔

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

此方法注意：

· 設置高寬，需加上：display:block; 

· 設置圓角無效：border-radius:50%;  需加上：overflow:hidden

 

針對屬性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%; 
}

3、設置圓角方法：

使用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 屬性可以對元素的部分區域進行裁剪(隱藏)。