微信小程序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 属性可以对元素的部分区域进行裁剪(隐藏)。