As a frontend seeker, many people want to quickly master a technology that is easy to see. WEUI is a framework that can be used quickly, regardless of your skill level.

WEUI framework introduction

WEUI is a small program UI framework, the so-called UI framework, is a set of interface design, there are many components, we just need to put them together, we can quickly achieve the interface we want, it will also make our small program more beautiful. To put it simply, weUI is a set of CSS styles that have already been written, and which HTML structure we need, we just need to add, will produce a nice structure. [WEUI] (https://weui.io/)

Use of the WEUI framework

1. Import the framework

First of all, because a WEUI framework is a written CSS style, how do we get it? We direct Baidu BooTCDN portal: https://www.bootcdn.cn/







<link>


2. For example

First page

For the first screen, we need a search box, several duplicate divs with images and text, and a navigation bar at the bottom. Let’s go straight to https://www.bootcdn.cn/ and find what we need or something like that. You’ll find one in the Search Related -Search Bar












<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>Copy the code

Second page

Then the second line is the head and some text. We go to weUI to find it. In the basic components-Badge, there is a matching one, and we strip down its code

<div class="weui-tab__panel tab">
            <div class="mine_title"> my </div> <div class="weui-cell">
              <div class="weui-cell__hd avatar">
                <img src="./images/avatar.jpg">
              </div>
              <div class="weui-cell__bd"> <p> Contact name </p> <p style="font-size: 13px; color: #888;"</p> </div> </div>Copy the code

Here we put the weui outside most of the div also took down, just to stay inside let go of the things, because the formats are very similar Do here, you already know the WEUI framework of simple operation, saving time and effort, but it is not possible to imagine a same with us, we must add some style, But it’s also very simple for you.

conclusion

The WEUI framework is suitable for beginners to get started with the front end. When we use some of these components, we try to wrap them in a div ourselves, which makes it easier to modify them. So if you haven’t studied the WEUI framework, you can start as soon as possible, you will find it is really a very simple and useful mobile framework, if you need my example, please come to me