微信小程序获取用户头像和昵称 (不用用户授权)

微信小程序获取用户头像和昵称 (不用用户授权)

1.wxml

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

但是很多时候我们需要将头像作成圆形的 open-data 是不能作成圆角的 我们来外层套一个view来覆盖作成圆形

我们来处理一下

1.wxml

  <view class="headView">
    <open-data class="icon" mode="aspectFit" type="userAvatarUrl"></open-data>
    <view class='icon'></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: 200rpx;
  width: 200rpx;
  border-radius: 50%;
  border: 50rpx solid #F5F5F5;
}

这样就可以了

希望此文章能帮助到你