WeUI is a UI library specially designed by wechat’s official design team for wechat mobile Web applications. The main content includes forms, basic components, operational feedback, navigation and search, and hierarchy specifications. WeUI source code is open to users, users can call the WeUI framework according to their own needs, greatly reducing the workload of developers, improve the development efficiency. The author as a beginner front-end rookie, selected Button, Toast and Tabbar to talk about the understanding of WeUI source code, if the understanding is wrong, welcome everyone to criticize.

WeUI official link

1. The Button Button

<a href="javascript:" class="weui-btn weui-btn_primary"> </a> <a href="javascript:" class="weui-btn weui-btn_primary Weui-btn_loading ">< I class="weui-loading"></ I >Copy the code

This is the HTML code of two buttons, using two hyperlinks, respectively corresponding to class: weui-bTN, weui-btn_primary, weui-btn_loading. Here the class name uses BEM specification, next we follow the class name to find their CSS style.

.weui-btn { position: relative; // relative positioning display: block; // Set the block level element width: 184px; // width margin-left: auto; Margin-right: auto; margin-right: auto; // The right margin ADAPTS to the padding: 8px 24px; box-sizing: border-box; font-weight: 700; font-size: 17px; // Text size: 17px text-align: center; // Text-decoration: none; color: #fff; The line - height: 1.41176471; border-radius: 4px; // The rounded corner is 4px overflow: hidden; // beyond hidden -webkit-tap-highlight-color: rgba(0,0,0,0); }Copy the code

Box-sizing: border-box means that any interior margins and borders specified by the element will be drawn within the specified width and height. The width and height of the content are obtained by subtracting the border and inner margin from the specified width and height, respectively. -webkit-tap-highlight-color: Rgba (0,0,0,0) sets background highlighting after click.

.weui-loading{ background-image: url(./loading.png); width: 20px; height: 20px; display: inline-block; position: absolute; background-size: 100%; top: 12px; left: 25px; Animation: Circle 2.5s Linear Infinite; } @keyframes circle{ from{ -webkit-transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); }}Copy the code

It is worth noting that there is an I tag in the tag to achieve the loading effect, which is implemented by animation.

2. Toast pop-up prompt

This is wechat’s iconic pop-up component, let’s look at its source code implementation.

<div class="page__bd page__bd_spacing"> <a href="javascript:" class="weui-btn weui-btn_default" id="showToast"> <! --BEGIN toast--> <div id="toast" style="display: none;" > <div class="weui-mask_transparent"></div> <div class="weui-toast"> <i class="weui-icon-success-no-circle Weui - icon_toast "> < / I > < p class =" weui - toast__content "> completed < / p > < / div > < / div > <! --end toast--> <script type="text/javascript"> // toast $(function(){ var $toast = $('#toast'); $('#showToast').on('click', function(){ if ($toast.css('display') ! = 'none') return; $toast.fadeIn(100); setTimeout(function () { $toast.fadeOut(100); }, 2000); }); });Copy the code

Toast is used to display temporary information and automatically disappears after 2 seconds. This is done using JavaScript, which first gets the dom structure of the button id”#showToast” and the pop-up event ID “#toast”. After clicking the button, the click event will be triggered, and the pop-up box will fade in. The display time of fade in is 0.1 seconds, and fade out after 2 seconds. The display time of fade out is also 0.1 seconds.

3. Bottom navigation of Tabbar

Tabbar, usually used as the bottom navigation in the main interface of a Web application. Each feature contains an icon icon and text description.

<script type="text/html" id="tpl_tabbar"> <div class="page"> <div class="page__bd" style="height: 100%;" > <div class="weui-tab"> <div class="weui-tab__panel"> </div> <div class="weui-tabbar"> <div class="weui-tabbar__item weui-bar__item_on"> <div style="display: inline-block; position: relative;" > <img src="./images/icon_tabbar.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" > WeChat < / p > < / div > < div class = "weui - tabbar__item" > < img SRC ="./images/icon_tabbar.png" Alt ="" class="weui-tabbar__icon"> <p class="weui-tabbar__label"> Contacts </p> </div> <div class="weui-tabbar__item"> <div style="display: inline-block; position: relative;" > <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon"> <span class="weui-badge weui-badge_dot" style="position: absolute; top: 0; right: -6px;" > < / span > < / div > < p class = "weui - tabbar__label" > find < / p > < / div > < div class = "weui - tabbar__item" > < img SRC = ". / images/icon_tabbar. PNG "Alt =" "class =" weui - tabbar__icon "> < p class =" weui - tabbar__label "> I < / p > < / div > < / div > </div> </div> </div> <script type="text/javascript"> $(function(){ $('.weui-tabbar__item').on('click', function () { $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on'); }); }); </script>Copy the code

Weui -tabbar__item is a child element of. Weui_tabber, indicating a navigation area, usually no less than 2, no more than 5. For the active state, the developer adds the.weUI_bar_ITEM_on class name to the currently active.weUI_tabbar_item as needed, and then controls the text color and icon changes.

.weui-tabbar { display: -webkit-box; display: -webkit-flex; display: flex; // Set the elastic layout position: relative; // z-index: 500; // stack weight set to 500 background-color: #f7f7f7; background-color: var(--weui-BG-1); } .weui-tabbar:before { content: " "; position: absolute; // Left: 0; top: 0; right: 0; height: 1px; Border - top: 1 px solid rgba (0,0,0,0.1); border-top: 1px solid var(--weui-FG-3); Color: rgba (0,0,0,0.1); Var (-- weui-fg-3); var(-- weui-fg-3); -webkit-transform-origin: 0 0 transform-origin: 0 0;; -webkit-transform: scaleY(0.5); The transform: scaleY (0.5); // Scale on the Y axis}Copy the code

Reference: WeUI official

If you want to use a component of WeUI, you can directly go to WeUI and select the corresponding source code to modify, and then link to the CSS online style.

The last

Because WeUI components and source too much, here only selected 3 components for source analysis, the author is the first time to try to nuggets published articles, there are many shortcomings, welcome everyone to point out criticism. If you think it’s good, give it a thumbs up! Thank you very much!