WeUI разработан специально для веб-сервисов WeChat

Обзор

WeUI — это базовая библиотека стилей, соответствующая нативному визуальному опыту WeChat, разработанная официальной командой дизайна WeChat для веб-разработки WeChat, что делает восприятие пользователей более унифицированным. Она включаетbutton、cell、dialog、toast、article、iconа также другие различные элементы.

Установка

Способ 1 (рекомендуется)

Официальный сайт WeChat, Staticfile CDN и cdnjs предоставляют CDN-ссылки для WeUI; они рекомендуются. Ссылки приведены ниже:

Source	Адрес
Официальный сайт WeChat	https://res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css
Staticfile CDN	https://cdn.staticfile.net/weui/0.4.3/style/weui.css
cdnjs	https://cdnjs.cloudflare.com/ajax/libs/weui/0.4.3/style/weui.css

Метод 2:

Установка с помощью bower

bower install --save weui

Метод 3:

Установка с помощью npm

npm install --save weui

Разработка

git clone https://github.com/weui/weui.git
cd weui
npm install -g gulp
npm install
gulp -ws

Запуститеgulp -wsкоманда, которая будет отслеживатьsrcизменения всех файлов в каталоге, и по умолчанию будет8080запустит сервер на порту, затем откроет в браузереhttp://localhost:8080/example。

Мобильный предпросмотр

Отсканируйте QR-код с помощью WeChat

Онлайн-примеры WEUI

Кнопка

Кнопки могут использоватьaилиbuttonтег. В WAP, чтобы вызвать активное состояние кнопки, необходимо инициировать событие ontouchstart. Вы можетеbodyдобавить вontouchstart=""глобальный триггер.

Типичные сценарии работы с кнопками: подтверждение, отмена, предупреждение, соответствующие классам:weui_btn_primary、weui_btn_default、weui_btn_warnу каждого сценария есть своё собственное отключённое состояниеweui_btn_disabledкроме того, есть также контурная кнопкаweui_btn_plain_xxxВ клиентском webview есть два типа размеров кнопок: по умолчанию ширина 100%, маленькие кнопки с адаптивной шириной, а расстояние между границами и текстом с обеих сторон составляет 0.75em:

<a href=".." class="weui_btn weui_btn_primary">按钮</a>
<a href=".." class="weui_btn weui_btn_disabled weui_btn_primary">按钮</a>
<a href=".." class="weui_btn weui_btn_warn">确认</a>
<a href=".." class="weui_btn weui_btn_disabled weui_btn_warn">确认</a>
<a href=".." class="weui_btn weui_btn_default">按钮</a>
<a href=".." class="weui_btn weui_btn_disabled weui_btn_default">按钮</a>
<div class="button_sp_area">
    <a href=".." class="weui_btn weui_btn_plain_default">按钮</a>
    <a href=".." class="weui_btn weui_btn_plain_primary">按钮</a>

    <a href=".." class="weui_btn weui_btn_mini weui_btn_primary">按钮</a>
    <a href=".." class="weui_btn weui_btn_mini weui_btn_default">按钮</a>
</div>

Ячейка

Cellпредставление списка, используемое для отображения информации в виде списка на странице; это наиболее часто используемая структура контента в WAP.CellОн состоит из нескольких разделов, каждый раздел включает заголовок разделаweui_cells_titleи ячейкиweui_cells。

cellсостоит из миниатюрыweui_cell_hd、основная частьweui_cell_bd、дополнительная частьweui_cell_ftтри части,cellИспользует адаптивную верстку; добавьте класс к той части, которой нужна адаптацияweui_cell_primaryи готово:

Элемент списка с описанием

<div class="weui_cells_title">带说明的列表项</div>
<div class="weui_cells">
    <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
            <p>标题文字</p>
        </div>
        <div class="weui_cell_ft">
            说明文字
        </div>
    </div>
</div>

CellЕго можно настраивать и расширять по мере необходимости, включая вспомогательные описания, навигацию, одиночный выбор, множественный выбор и т. д. Ниже приведён элемент списка со значком, описанием и навигацией; в остальных случаях можно напрямую обратиться кexampleкоду ниже:

<div class="weui_cells_title">带图标、说明、跳转的列表项</div>
<div class="weui_cells weui_cells_access">

    <a class="weui_cell" href="..">
        <div class="weui_cell_hd">
            <img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
        </div>
        <div class="weui_cell_bd weui_cell_primary">
            <p>cell standard</p>
        </div>
        <div class="weui_cell_ft">
            说明文字
        </div>
    </a>
    <a class="weui_cell" href="..">
        <div class="weui_cell_hd">
            <img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
        </div>
        <div class="weui_cell_bd weui_cell_primary">
            <p>cell standard</p>
        </div>
        <div class="weui_cell_ft">
            说明文字
        </div>
    </a>
</div>

Диалог

Если системное окно предупреждения не может удовлетворить требования веб-страницы к временному содержимому представления, можно реализовать настраиваемый диалог, аналогичный по форме alert, и свободно использовать в диалоге различные элементы управления для своих нужд.

<div class="weui_dialog_confirm">
    <div class="weui_mask"></div>
    <div class="weui_dialog">
        <div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>
        <div class="weui_dialog_bd">自定义弹窗内容<br>...</div>
        <div class="weui_dialog_ft">
            <a href=".." class="weui_btn_dialog default">取消</a>
            <a href=".." class="weui_btn_dialog primary">确定</a>
        </div>
    </div>
</div>

<div class="weui_dialog_alert">
    <div class="weui_mask"></div>
    <div class="weui_dialog">
        <div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>
        <div class="weui_dialog_bd">弹窗内容，告知当前页面信息等</div>
        <div class="weui_dialog_ft">
            <a href=".." class="weui_btn_dialog primary">确定</a>
        </div>
    </div>
</div>

Toast

Toast используется для временного отображения определённой информации и автоматически исчезает через несколько секунд. Такая информация обычно представляет собой сообщения об успехе, неудаче или состоянии ожидания для легковесных операций.

<div id="toast" style="display: none;">
    <div class="weui_mask_transparent"></div>
    <div class="weui_toast">
        <i class="weui_icon_toast"></i>
        <p class="weui_toast_content">已完成</p>
    </div>
</div>

<div id="loadingToast" class="weui_loading_toast" style="display:none;">
    <div class="weui_mask_transparent"></div>
    <div class="weui_toast">
        <div class="weui_loading">
            <!-- :) -->
            <div class="weui_loading_leaf weui_loading_leaf_0"></div>
            <div class="weui_loading_leaf weui_loading_leaf_1"></div>
            <div class="weui_loading_leaf weui_loading_leaf_2"></div>
            <div class="weui_loading_leaf weui_loading_leaf_3"></div>
            <div class="weui_loading_leaf weui_loading_leaf_4"></div>
            <div class="weui_loading_leaf weui_loading_leaf_5"></div>
            <div class="weui_loading_leaf weui_loading_leaf_6"></div>
            <div class="weui_loading_leaf weui_loading_leaf_7"></div>
            <div class="weui_loading_leaf weui_loading_leaf_8"></div>
            <div class="weui_loading_leaf weui_loading_leaf_9"></div>
            <div class="weui_loading_leaf weui_loading_leaf_10"></div>
            <div class="weui_loading_leaf weui_loading_leaf_11"></div>
        </div>
        <p class="weui_toast_content">数据加载中</p>
    </div>
</div>

Страница результата (Msg Page)

Страницу результата в целом можно рассматривать как итоговую страницу после ряда шагов операции, служащую завершением процесса. Её основная цель — сообщить пользователю результат обработки операции и необходимые соответствующие сведения (их можно использовать, чтобы убедиться, что предыдущие операции были выполнены правильно). Если процесс используется для включения или отключения каких-либо важных функций, на страницу результата можно добавить описательное содержимое, связанное с функцией. Кроме того, страница результата может также содержать дополнительные операции, такие как предоставление точек входа для розыгрышей, подписки на официальный аккаунт и т. п.

<div class="weui_msg">
    <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>
    <div class="weui_text_area">
        <h2 class="weui_msg_title">操作成功</h2>
        <p class="weui_msg_desc">内容详情，可根据实际需要安排</p>
    </div>
    <div class="weui_opr_area">
        <p class="weui_btn_area">
            <a href=".." class="weui_btn weui_btn_primary">确定</a>
            <a href=".." class="weui_btn weui_btn_default">取消</a>
        </p>
    </div>
    <div class="weui_extra_area">
        <a href="">查看详情</a>
    </div>
</div>

Страница статьи

Текстовое представление отображает большие фрагменты текста, которые обычно являются основным содержимым страницы.ArticleОн поддерживает стили форматированного текста, такие как абзацы, многоуровневые заголовки, цитаты, встроенные изображения, упорядоченные/неупорядоченные списки, и может реагировать на операции выделения пользователем.

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

<article class="weui_article">
    <h1>大标题</h1>
    <section>
        <h2 class="title">章标题</h2>
        <section>
            <h3>1.1 节标题</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute</p>
        </section>
        <section>
            <h3>1.2 节标题</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
    </section>
</article>

Иконки

<i class="weui_icon_msg weui_icon_success"></i>
<i class="weui_icon_msg weui_icon_info"></i>
<i class="weui_icon_msg weui_icon_warn"></i>
<i class="weui_icon_msg weui_icon_waiting"></i>
<i class="weui_icon_safe weui_icon_safe_success"></i>
<i class="weui_icon_safe weui_icon_safe_warn"></i>
<div class="icon_sp_area">
    <i class="weui_icon_success"></i>
    <i class="weui_icon_success_circle"></i>
    <i class="weui_icon_success_no_circle"></i>
    <i class="weui_icon_info"></i>
    <i class="weui_icon_waiting"></i>
    <i class="weui_icon_waiting_circle"></i>
    <i class="weui_icon_circle"></i>
    <i class="weui_icon_warn"></i>
    <i class="weui_icon_download"></i>
    <i class="weui_icon_info_circle"></i>
</div>

Адрес загрузки проекта

Адрес Github:https://github.com/weui/weui

Адрес этого сайта:weui-master.zip