[Серия руководств по мини-программе WeChat Xiaobai] -- Стиль (WXSS)

Апплет WeChat

Официальный адрес документаБилеты.WeChat.QQ.com/debug/WX ADO…

Приходит вопрос? Если да, то почему мы пишем эту статью?

Есть только один ответ, который сделает вас «легким для понимания» быстрее и изменит ваше мышление.В следующей статье будет дано абзацное объяснение официального документа.

Чтобы приспособиться к большинству интерфейсных разработчиков, WXSS имеет CSSнаиболеехарактеристика. В то же время, чтобы лучше подходить для разработки апплета WeChat, WXSS расширил и изменил CSS. По сравнению с CSS, функции расширений WXSS: единицы измерения и импорт стилей.

Дополнение: По поводу расширенных возможностей скажем ниже, так как в документации сказано, что WXSS обладает большинством возможностей CSS, в чем разница?

1. Нет тела
Да, на каждой странице апплета нет атрибута body, но вы можете повлиять на стиль всей страницы, установив страницу в wxss, например следующий код

page {
    background:#F8F8F8
}

И так далее, конечно, вы также можете установить свойство backgroundColor в xxx.json страницы, чтобы повлиять на цвет пустой области, которая появляется, когда страница открывается. -up функции загрузки, вам часто нужно установить атрибуты backgroundColor.

2. Нет отношений родитель-ребенок
При использовании css мы часто сохраняем иерархию стилей в соответствии с иерархией узлов html. Например, ваш html-код имеет следующий код

<div class="box">
    <p class="content">
        <strong ></strong>
    </p>
</div>

Мы привыкли писать css следующим образом

.box .content strong {}

Преимущество такого написания в том, что стиль сильного не повлияет на сильный в других местах.ноЭтот тип иерархических отношений родитель-потомок не поддерживается в мини-программах. Вы можете установить только один за другим, см. следующий код апплета

<view class="box">
    <text class="box-txt"></text>
</view>

Как для представленного выше представления следует написать соответствующий wxss? см. код ниже

// 正确的
.box {}
.box-txt {}

// 错误的
.box .box-txt {}

Итак, вы понимаете? !

3. Изменения размера
В css у нас есть много единиц измерения размера, таких как px, em и т. д. Конечно, их все еще можно использовать в апплете, но апплет добавляет для себя еще одну единицу, то естьrpx.

Как мобильное приложение, Мини-программы должны быть адаптированы к устройствам с различными характеристиками и совместимы с более крупными мобильными телефонами (Другими словами, мне все еще нравится размер iPhone 5, которым можно управлять одной рукой и который не будет бить по голове при просмотре фильмов на кровати.).

Итак, самая важная особенность rpx заключается в том, что он может адаптироваться к ширине экрана. Он указывает ширину экрана 750rpx. Например, на iPhone6 ​​ширина экрана составляет 375 пикселей и 750 физических пикселей, поэтому 750rpx = 375px = 750 физических пикселей, 1rpx = 0,5px = 1 физический пиксель.

Вы понимаете? Чиновник дал форму, в которой очень легко разобраться, см. рисунок ниже.

alt
alt

Это преобразование относительно простое и не объясняется.Если вы действительно не понимаете, вы можете оставить сообщение.

4. Импорт стилей
Wxss апплета поддерживает импорт стилей.Эта функция весьма полезна, особенно когда мы используем какие-то другие библиотеки, мы можем напрямую импортировать сторонние файлы wxss.Какая радость.

Использование также очень простое, посмотрите на код ниже.

@import "common.wxss";
.middle-p {
  padding:15px;
}

5, встроенный стиль
Как и CSS, WXSS поддерживает два стиля Class и Style, но все же есть разница в использовании, сводка одного предложения: «Если в вашем стиле есть динамический контент, запишите его в style, другие файлы Class,

Например этот код

<view style="color:{{color}};" />

Проблема, связанная с записью слишком большого количества стилей в стиль, заключается в том, что апплету также необходимо анализировать соответствующий макет стиля при рендеринге представления, что неизбежно оказывает некоторое влияние на производительность.

6. Селектор
Кроме того, wxss в основном поддерживает селекторы в css, такие как классы, идентификаторы, компоненты и т. д., см. официальную картинку ниже.

alt
alt

И подобно расширенным свойствам CSS, таким как last-child, вы также можете с удовольствием использовать его в wxss.

7, глобальный стиль и местный стиль
В принципе, wxss в апплете отвечает за wxml view файл, но всегда есть какие-то общие атрибуты для приложения, поэтому апплет предоставляет wxss для самого приложения, то есть app.wxss, конечно, вы не Вводить нужно вручную, он будет автоматически загружаться при каждом просмотре, имейте это в виду.

небольшое резюме

Что касается того, что wxss поддерживает для CSS, официальный WeChat не предоставляет соответствующих документов, нам нужно раскопать больше деталей, в конце концов, Tencent — это не Baidu, и они так хорошо напишут документы.

Категории