What knowledge can we learn through WeUI of WeChat?

WeUI is a Web Service Development UI kit, which currently contains 12 modules (Button, Cell, Toast, Dialog, Progress, Msg, Article, ActionSheet, Icons, Panel, Tab, SearchBar ). weUI is a Web Service Development UI kit, which currently contains 12 modules (Button, Cell, Toast, Dialog, Progress, Msg, Article, ActionSheet, Icons, Panel, Tab, SearchBar ).

Demo page: https://weui.io

Github: https://github.com/weui/weui

The following describes the CSS skills I learned from WeUI.

1. Button

From here, I noticed that many borders are drawn using before and after in WeUI implementation.

.weui_btn:after {    content: " ";    width: 200%;    height: 200%;    position: absolute;    top: 0;    left: 0;    border: 1px solid rgba(0, 0, 0, 0.2);    -webkit-transform: scale(0.5);    transform: scale(0.5);    -webkit-transform-origin: 0 0;    transform-origin: 0 0;    box-sizing: border-box;    border-radius: 10px;}

This is done to ensure that 1px is actually 1 pixel on the Retina screen (Retina screen.

2. Cell2.1.weui _ cell

.weui_cell {    padding: 10px 15px;    position: relative;    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;    -webkit-box-align: center;    -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;}

We can see that WeUI uses a large number of flex la S.

2.2.Cell (list items)

Previously, I was confused about how to implement a list between items. The left-side blank border. border attribute does not support displaying only one part of the edge. Do you want to insert it?

WeUI is implemented by using. weui_cells: before.

.weui_cell:before {    content: " ";    position: absolute;    left: 15px;    top: 0;    width: 100%;    height: 1px;    border-top: 1px solid #D9D9D9;    color: #D9D9D9;    -webkit-transform-origin: 0 0;    transform-origin: 0 0;    -webkit-transform: scaleY(0.5);    transform: scaleY(0.5);}

Left: 15px (left blank) with overflow: hidden on. weui_cells_title (hide the excess part on the right) to display the blank border.

The right arrow at the end of the list item is actually implemented by weui_cell_ft: after, the 45-degree border is rotated. I thought I would use iconfont.

.weui_cells_access .weui_cell_ft:after {    content: " ";    display: inline-block;    -webkit-transform: rotate(45deg);    transform: rotate(45deg);    height: 6px;    width: 6px;    border-width: 2px 2px 0 0;    border-color: #C8C8CD;    border-style: solid;    position: relative;    top: -2px;    top: -1px;    margin-left: .3em;}

2.3.Radio (single-choice list item)

A hidden

The hiding method is as follows:

.weui_check {    position: absolute;    left: -9999em;}

After each input. weui_check, a span. input. weui_check and. weui_icon_checked used to display the check boxes are sibling.

.weui_cells_radio .weui_check:checked + .weui_icon_checked:before {    display: block;    content: '\EA08';    color: #09BB07;    font-size: 16px;}

2.4.Checkbox (check list items)

The check box is hidden like the one shown above.

Unexpectedly, both the selected and unselected effects are implemented using iconfont. we thought that the unselected results were implemented using border. The selected results were determined using a check iconfont in combination with the horizontal vertical center positioning.

/* Selected effect */. weui_cells_checkbox. weui_check: checked +. weui_icon_checked: before {content: '\ EA06'; color: #09BB07;}/* unselected effect */. weui_cells_checkbox. weui_icon_checked: before {content: '\ EA01'; color: # C9C9C9; font-size: 23px; display: block ;}

2.5.Switch)

Previously, I thought this effect was very difficult to implement. After reading the weui implementation, I only needed css!

.weui_switch {  -webkit-appearance: none;  -moz-appearance: none;  appearance: none;  position: relative;  width: 52px;  height: 32px;  border: 1px solid #DFDFDF;  outline: 0;  border-radius: 16px;  box-sizing: border-box;  background: #DFDFDF;}.weui_switch:checked {  border-color: #04BE02;  background-color: #04BE02;}.weui_switch:before {  content: " ";  position: absolute;  top: 0;  left: 0;  width: 50px;  height: 30px;  border-radius: 15px;  border-top-left-radius: 15px;  border-top-right-radius: 15px;  border-bottom-right-radius: 15px;  border-bottom-left-radius: 15px;  background-color: #FDFDFD;  -webkit-transition: -webkit-transform .3s;  transition: -webkit-transform .3s;  transition: transform .3s;  transition: transform .3s, -webkit-transform .3s;}.weui_switch:checked:before {  -webkit-transform: scale(0);  transform: scale(0);}.weui_switch:after {  content: " ";  position: absolute;  top: 0;  left: 0;  width: 30px;  height: 30px;  border-radius: 15px;  background-color: #FFFFFF;  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);  -webkit-transition: -webkit-transform .3s;  transition: -webkit-transform .3s;  transition: transform .3s;  transition: transform .3s, -webkit-transform .3s;}.weui_switch:checked:after {  -webkit-transform: translateX(20px);  transform: translateX(20px);}

Among them,. weui_switch provides a border, the background color is not selected # DFDFDF (dark gray), when selected #04BE02 (green ).

. Weui_switch: before provides a light gray # FDFDFD inside the border. scale (0) decreases and disappears when selected.

. Weui_switch: after provides a circular button. When selected, move 20px to the right.

The effect is as follows:

2.6.Form)

The input pattern = "[0-9] * limits that the input can only be 0-9 digits (the pattern value is a regular expression ).

Input [type = "number"] on Chrome, the up and down arrows are displayed on the rightmost side by default. weUI disabled the arrow through the following code. This code is invisible in Chrome's Dev Tool and can only be viewed in CSS, which has caused me to find it for a long time.

.weui_input::-webkit-outer-spin-button,.weui_input::-webkit-inner-spin-button {  -webkit-appearance: none;  margin: 0;}

Click input [type = "number"]. The keyboard is automatically opened on iOS.

2.7.Upload (upload)

WeUI uses the following simple method to implement the gray layer in front of the image. add top: 0; right: 0; bottom: 0; left: 0; to the absolute position, and the element is pushed to the boundary of the parent element.

.weui_uploader_status:before {    content: " ";    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    background-color: rgba(0, 0, 0, 0.5);}

The Image Upload Status adopts a classic (horizontal + vertical) center mode. top: 50% (allows the upper boundary of the element to locate the 50% position of the parent element) and transform: translateY (-50%) (move an element up to 50% of its height ).

.weui_uploader_status .weui_uploader_status_content {    position: absolute;    top: 50%;    left: 50%;    -webkit-transform: translate(-50%, -50%);    transform: translate(-50%, -50%);    color: #FFFFFF;}

I usually use the following vertical center method. horizontal center is similar.

.vertical-center {  position: relative;  top: 50%;  transform: translateY(-50%);}

The final upload button:

Input [type = "file"] on iOS, the menu of "photo" or "photo" is automatically selected.

The box is drawn by. weui_uploader_input_wrp, And the plus signs are by. weui_uploader_input_wrp: before AND: after.

The real input is hidden using opacity: 0.

.weui_uploader_input_wrp:before {    width: 2px;    height: 39.5px;}.weui_uploader_input_wrp:after {    width: 39.5px;    height: 2px;}.weui_uploader_input_wrp:before,.weui_uploader_input_wrp:after {    content: " ";    position: absolute;    top: 50%;    left: 50%;    -webkit-transform: translate(-50%, -50%);    transform: translate(-50%, -50%);    background-color: #D9D9D9;}.weui_uploader_input {    position: absolute;    z-index: 1;    top: 0;    left: 0;    width: 100%;    height: 100%;    opacity: 0;    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

2.8.Form Error (Form Error)

On iOS, click input [type = "date"] to display the "Year-month-day" selection box, click input [type = "datetime-local"]. The "month-day-morning/afternoon-hour-minute" option box is displayed.

2.9.Select)

The right arrow and split line at the phone number + 86 are drawn using: before AND: after.

3. Toast

    
    
                
Completed
    

. Weui_mask_transparent is a position: fixed full screen transparent screen, making the user unable to operate the interface.

. Weui_toast is the Black Block in the middle of the page.

It turned out to be implemented simply using HTML + CSS (animation + transition.

    
    
        
            
            
            
            
            
            
            
            
            
            
            
            
        
        
Loading data
    

.weui_loading_leaf {  position: absolute;  top: -1px;  opacity: 0.25;}.weui_loading_leaf:before {  content: " ";  position: absolute;  width: 8.14px;  height: 3.08px;  background: #d1d1d5;  box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px;  border-radius: 1px;  -webkit-transform-origin: left 50% 0px;          transform-origin: left 50% 0px;}.weui_loading_leaf_0 {  -webkit-animation: opacity-60-25-0-12 1.25s linear infinite;          animation: opacity-60-25-0-12 1.25s linear infinite;}.weui_loading_leaf_0:before {  -webkit-transform: rotate(0deg) translate(7.92px, 0px);          transform: rotate(0deg) translate(7.92px, 0px);}/* ... */.weui_loading_leaf_11 {  -webkit-animation: opacity-60-25-11-12 1.25s linear infinite;          animation: opacity-60-25-11-12 1.25s linear infinite;}.weui_loading_leaf_11:before {  -webkit-transform: rotate(330deg) translate(7.92px, 0px);          transform: rotate(330deg) translate(7.92px, 0px);}@-webkit-keyframes opacity-60-25-0-12 {  0% {    opacity: 0.25;  }  0.01% {    opacity: 0.25;  }  0.02% {    opacity: 1;  }  60.01% {    opacity: 0.25;  }  100% {    opacity: 0.25;  }}/* ... */@-webkit-keyframes opacity-60-25-11-12 {  0% {    opacity: 0.895958333333333;  }  91.6767% {    opacity: 0.25;  }  91.6867% {    opacity: 1;  }  51.6767% {    opacity: 0.25;  }  100% {    opacity: 0.895958333333333;  }}

4. Dialog

    
    
        
Pop-up window title
        
Custom pop-up window content, left-aligned display, inform the information to be confirmed, etc.
        
Cancel OK
    

The border you can see is implemented with: after.

5. Progress

Omitted. (* ω rows .)✄╰ ひ ╯

6. Msg

Omitted. (* ω rows .)✄╰ ひ ╯

7. Article

Omitted. (* ω rows .)✄╰ ひ ╯

8. ActionSheet

    
    
        
            
Example menu
            
Example menu
            
Example menu
            
Example menu
        
        
            
Cancel
        
    

It is worth mentioning that the ActionSheet at the bottom of the page is always displayed, but it is usually hidden through transform: translateY (100%). When displayed, it uses translateY (0 ). this method can adapt to any height of ActionSheet without JS.

.weui_actionsheet {    position: fixed;    left: 0;    bottom: 0;    -webkit-transform: translate(0, 100%);    transform: translate(0, 100%);    -webkit-backface-visibility: hidden;    backface-visibility: hidden;    z-index: 2;    width: 100%;    background-color: #EFEFF4;    -webkit-transition: -webkit-transform .3s;    transition: -webkit-transform .3s;    transition: transform .3s;    transition: transform .3s, -webkit-transform .3s;}.weui_actionsheet_toggle {    -webkit-transform: translate(0, 0);    transform: translate(0, 0);}

9. Icons

A bunch of iconfont. (* yunω images .)✄╰ ひ ╯

10. Panel

Omitted. (* ω rows .)✄╰ ひ ╯

11. Tab

Navbar:

TabBar:

Omitted. (* ω rows .)✄╰ ひ ╯

12. SearchBar

No focus status:

Focal point status:

        
  Cancel

The most curious thing is that when a user clicks the search box, the button in the lower-right corner of the pop-up keyboard is "Search" rather than "line feed ".

The result of my test is that the "Search" button is displayed on the keyboard when you click in the search box, and the "line feed" button is displayed when you open it in Safari ".

This is very strange. It shows what operations have been done. Is it related to JS?

However, I searched the internet and found that as long as the input [type = "search"] is surrounded by form and the form has the action attribute, I can. Example:

However, in WeUI implementation, form does not have the action attribute, so we do not know how WeUI is implemented.

Related Articles:

How does PHP In the background process image uploading through WEUI?

Angularjs integrated UI (weui)

The encapsulation of common JS information prompts in WEUI applications

Which of the following knowledge can be learned through WeUI? For more information, see other related articles in the first PHP community!