Use of WeUI, use of WeUI

Use of WeUI, use of WeUI

Recently, the company needs to develop an end-to-end store, and the boss tries his best to use WeUI, so I had my first experience using WeUI.

 

1. Because it is a mobile phone, you need to write a line of necessary code before writing the page.

<Meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, user-scalable = no"/>

-- Initial-scale: the first time the page is displayed, It is the zoom level of the area. 1.0 refers to the display according to the actual size -- maximum-scale: the program that the user can enlarge the page, 1.0 means to prohibit the user from enlarging to the actual size -- user-scalable: whether to scale the page, no indicates disable zooming. 2. To use WeUI, you must use the built-in css. 3. JQuery is not used because it is a mobile phone. It is not good for JQuery (jealousy worship ), only on the mobile phone end, so I chose a more lightweight zepto. js (also want to write something to record my use of zepto 'heartbleed 'process) 4, web site recommendation https://www.oschina.net/p/weuihttps://weui.io/ 5, the use of WeUI will omit a lot of css will greatly improve the speed of writing code, at the beginning, I used to write a little bit in comparison to the class of the original website. When you get the page, you can first compare the WeUI style to see which typographical styles you need, and then write the page, which saves time. 6. We found that weui-cells are used in many la S. A cell can be nested with many cellcells or cells, but the width should be set to 100% (cells all have their own padding-left: 15px, padding-right: 15px)

<Div class = "weui-cells"> <div class = "weui-cell"> <div class = "weui-cell_hd"> column header </div> <div class =" weui-cell_bd> column content </div> <div class = "weui-cell_ft"> right side of the column (there is an arrow by default) </div> <div class = "weui-cell"> <div class = "weui-cell_hd"> column header2 </div> <div class = "weui-cell_bd"> column content 2 </div> <div class = "weui-cell_ft"> right side of the column (there is an arrow by default) 2 </div>

7. Many buttons are used.

There are many button styles. Which of the following can be used to compare the buttons in the demo of the website?

<A href = "javascript:;" class = "weui-btn weui-btn_default"> button </a>

8. There is also a masked layer, and the WeUI style is well written.

Javascript can be used to control the appearance of the masked layer. Its z-index

<div class="weui-mask" id="testMask" style="display: none;"></div>

9. There are also commonly used navigation at the end of the page.

You only need to slightly change the icon background color.

<Div class = "footer weui-tabbar"> <a href = "javascript :; "class =" weui-tabbar _ item weui-bar _ item_on ">  <p class =" weui-tabbar _ label "> homepage </p> </a> <a href =" page/allOrder.html "class =" weui-tabbar _ item ">  <p class =" weui-tabbar _ label "> order </p> </a> <a href =" page/user.html "class =" weui-tabbar _ item ">  <p class =" weui-tabbar _ label "> personal center </p> </> <a href = "javascript :; "class =" weui-tabbar _ item ">  <p class = "weui-tabbar _ label"> share </p> </a> </div>

 

10. The box layout is also very convenient to evenly divide the 'block '.

<div class="weui-flex">　　<div class="weui-flex__item"><div class="placeholder">weui</div></div></div><div class="weui-flex">　　<div class="weui-flex__item"><div class="placeholder">weui</div></div>　　<div class="weui-flex__item"><div class="placeholder">weui</div></div></div><div class="weui-flex">　　<div class="weui-flex__item"><div class="placeholder">weui</div></div>　　<div class="weui-flex__item"><div class="placeholder">weui</div></div>　　<div class="weui-flex__item"><div class="placeholder">weui</div></div></div><div class="weui-flex">　　<div class="weui-flex__item"><div class="placeholder">weui</div></div>　　<div class="weui-flex__item"><div class="placeholder">weui</div></div>　　<div class="weui-flex__item"><div class="placeholder">weui</div></div>　　<div class="weui-flex__item"><div class="placeholder">weui</div></div></div>

 

11. There are also search box Dialog pop-up prompt box Toast and so on are relatively common