Фреймворк, с которого должен начинать интерфейс Xiaobai — WEUI

внешний фреймворк

Как искатель на переднем крае, я думаю, что многие люди хотят быстро освоить технологию, эффект от которой легко увидеть, когда они начинают. WEUI — это фреймворк, который можно использовать быстро, независимо от того, насколько вы сильны.

Введение в структуру WEUI

WEUI — это UI-фреймворк для набора небольших программ.Так называемый UI-фреймворк — это набор решений по дизайну интерфейса.В нем много компонентов.Нам нужно только склеить их вместе,чтобы быстро реализовать желаемый интерфейс,и это также позволит нам Апплет красивее. Проще говоря, weui — это написанный набор CSS-стилей, какая html-структура нам нужна, просто добавим ее, и будет сгенерирована более красивая структура.
［WEUI］(https://weui.io/)

Использование фреймворка WEUI

1. Импортируем фреймворк


Прежде всего, поскольку инфраструктура WEUI представляет собой письменный стиль CSS, как нам получить этот стиль? Мы направляем Baidubootcdn
传送门：https://www.bootcdn.cn/



Конечно, кроме ссылки на weui в этом месте есть еще и гитхаб и т.д., дальше автор вводить не будет
скопируйте это<link>теги можно вставлять в html файл

Далее нужно найти нужные нам компоненты на weui. Вот пример, чтобы вам было легче понять

2. Пример

первая страница

В первом интерфейсе нам нужно окно поиска, несколько повторяющихся элементов div с картинками и текстом и панель навигации внизу.
мы идем прямоhttps://www.bootcdn.cn/Найдите то, что нам нужно или что-то в этом роде. Вы найдете его в Search Related-Search Bar.

Разве это не именно тот компонент поиска, который нам нужен?
Затем мы щелкаем правой кнопкой мыши, чтобы проверить и скопировать все самые внешние элементы div, которые охватывают все поле поиска.

Щелкните правой кнопкой мыши Изменить HTML объявления.

Скопируйте и вставьте в наш html файл Затем вы обнаружите, что на нашей веб-странице уже есть окно поиска, точно такое же, как это.

Далее, я думаю, вы должны обнаружить, что вы не можете найти какие-либо компоненты, подходящие для размещения продуктов в weui, потому что weui не всемогущ.Вы можете написать эти пять div самостоятельно, и автор не будет их здесь показывать.

На этой странице тоже нужна навигация внизу.Продолжаем искать в weui.Нашли очень похожую в навигации связанной-Tabbar.Вот подумаешь,бери эту и удали один из внутренних дивов,а потом поменяй иконку Не хорошо.
Все верно, но я хочу напомнить всем, что при копировании кода этих компонентов нам нужно самим завернуть их в div, чтобы потом самим внести некоторые модификации в стиле css
Ниже приведен код навигации, шаги операции такие же, как указано выше.

<div class="weui-tabbar">
            <div class="weui-tabbar__item weui-bar__item_on">
              <div style="display: inline-block; position: relative;">
                <img src="./images/shengnvguo.png" alt="" class="weui-tabbar__icon">
                <span class="weui-badge" style="position: absolute; top: -2px; right: -13px;">8</span>
              </div>
              <p class="weui-tabbar__label">商城</p>
            </div>

            <div class="weui-tabbar__item">
              <img src="./images/dangao.png" alt="" class="weui-tabbar__icon">
              <p class="weui-tabbar__label">购物车</p>
            </div>

            <div class="weui-tabbar__item">
              <div style="display: inline-block; position: relative;">
                <img src="./images/kafei.png" alt="" class="weui-tabbar__icon">
              </div>
              <p class="weui-tabbar__label">我的</p>
            </div>
          </div>

вторая страница

Голова "моя", там все просто, искать не надо, пишешь сам, а потом вторая строчка аватарка плюс какой-то текст, заходим в weui чтобы найти, в базовом компоненте-Бейдж, есть совпадение, мы его код отрубим

<div class="weui-tab__panel tab">
            <div class="mine_title">我的</div>
            <div class="weui-cell">
              <div class="weui-cell__hd avatar">
                <img src="./images/avatar.jpg">
              </div>
              <div class="weui-cell__bd">
                <p>联系人名称</p>
                <p style="font-size: 13px; color: #888;">摘要信息</p>
              </div>
            </div>
</div>

Здесь мы также удаляем самый внешний div из weui, просто чтобы добавить в него следующие вещи позже, потому что форматы очень похожи.
Для этого вы уже знаете, что WEUI framework прост в эксплуатации, экономит время и силы, но невозможно быть в точности таким, как мы себе представляли, и вам придется самому добавлять некоторые стили, но это тоже очень просто для каждый.

Суммировать

Фреймворк WEUI подходит для новичков во фронтенде, когда мы используем некоторые из этих компонентов, мы стараемся оборачивать их в div, чтобы нам было проще и удобнее их модифицировать. Поэтому, если читатель еще не изучил структуру WEUI, вы можете начать как можно скорее, вы обнаружите, что это действительно очень простая и практичная структура мобильного терминала, если вам нужен мой пример, вы можете найти меня

Категории