Аватар апплета с открытыми данными userAvatarUrl округлен.

внешний интерфейс WeChat Апплет WeChat

Апплет может получать и отображать информацию об аватаре WeChat без авторизации, то есть получать и отображать через open-data, а тип аватара — userAvatarUrl.

//头像显示的写法
<open-data type='userAvatarUrl'></open-data>

Далее мы добавим класс макета и режим на аватарку, тогда код станет таким:

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


.headView .icon {
    height: 180rpx;
    width: 180rpx;
    border-radius: 50%;
}

Здесь мы обнаружим, что, хотя у нас есть закругленные углы в классе, это не работает:

Итак, приходим к выводу: Скруглить углы аватаре в апплете open-data нельзя.

Итак, как же без авторизации отображать аватарку пользователя и делать скругленные углы?

Целевой эффект:

Вот как я с этим справляюсь:

  1. Логика реализации: Сделайте абсолютный макет аватара и покройте его выдолбленным видом Установите границу вида так, чтобы она закрывала некруглую часть аватара, а цвет границы выдолбленного вида должен быть таким же, как цвет окружающего фона, чтобы получить псевдозакругленные углы.

  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 class='icon' mode='aspectFit' type='userAvatarUrl'></open-data>


.headView .icon {
    height: 180rpx;
    width: 180rpx;
    border-radius: 50%;
    overflow：hidden;//只需要添加这句 把溢出部分隐藏就可以了
}
Просто добавьте это предложение overflow: hidden; чтобы скрыть часть переполнения

Спасибо за напоминание, если есть что-то, что нужно улучшить, пожалуйста, сообщите

Категории