微信小程序open-data userAvatarUrl圆角显示

最新推荐文章于 2025-06-25 15:09:40 发布

企鹅Sheldon

最新推荐文章于 2025-06-25 15:09:40 发布

阅读量6.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序 CSS

本文链接：https://blog.csdn.net/Pc620/article/details/89928860

微信小程序专栏收录该内容

4 篇文章

订阅专栏

博客介绍了微信小程序获取用户头像的两种方式，一是调用wx.getUserInfo方法解析avatarUrl，二是用open-data组件直接显示。还提到设置头像圆角，起初说border-radius:50%不行，需用clip-path，后说明配合overflow:hidden，border-radius:50%也可奏效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序获取用户头像有两种方式：

一种是通过调用wx.getUserInfo方法，从userInfo字段中解析出avatarUrl。

另一种是通过open-data组件，直接将用户头像显示在页面指定位置。

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

针对第二种方法，无法使用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 属性可以对元素的部分区域进行裁剪(隐藏)。

--------------------------------------------------------------------------------------------------

5.8修改

针对属性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%; 
}