Easy Tutorial
❮ Cpp Construct Function Initial List Android Tutorial Xfermode Porterduff ❯

WeUI is Tailor-Made for WeChat Web Services

Overview

WeUI is a foundational style library that is consistent with the native visual experience of WeChat, designed by the official design team of WeChat specifically for WeChat Web development, which can make the user experience more unified. It includes various elements such as button, cell, dialog, toast, article, icon, etc.


Installation

Method One (Recommended)

WeChat's official team, Staticfile CDN, and cdnjs provide CDN links for WeUI, which are recommended for use. The links are as follows:

Source Address
WeChat Official //res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css
Staticfile CDN //cdn.staticfile.org/weui/0.4.3/style/weui.css
cdnjs //cdnjs.cloudflare.com/ajax/libs/weui/0.4.3/style/weui.css

Method Two:

Install using bower

bower install --save weui

Method Three:

Install using npm

npm install --save weui

Development

git clone https://github.com/weui/weui.git
cd weui
npm install -g gulp
npm install
gulp -ws

Running the gulp -ws command will monitor all file changes in the src directory and start the server on port 8080 by default, then open http://localhost:8080/example in the browser.


Mobile Preview

Please scan the QR code with WeChat

WeUI Online Example


Buttons (Button)

Buttons can use a or button tags. To trigger the active state of the button on wap, the ontouchstart event must be triggered, which can be globally triggered by adding ontouchstart="" to the body.

Common operation scenarios for buttons: confirm, cancel, warning, corresponding to the classes: weui_btn_primary, weui_btn_default, weui_btn_warn. Each scenario has its own disabled state weui_btn_disabled. In addition, there is a hollow button weui_btn_plain_xxx. The button sizes in the client webview are divided into two categories, the default width is 100%, and the small button width adapts to the size, with a border and text spacing of 0.75em on both sides:

<a href="javascript:;" class="weui_btn weui_btn_primary">Button</a>
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_primary">Button</a>
<a href="javascript:;" class="weui_btn weui_btn_warn">Confirm</a>
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_warn">Confirm</a>
<a href="javascript:;" class="weui_btn weui_btn_default">Button</a>
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_default">Button</a>
<div class="button_sp_area">
    <a href="javascript:;" class="weui_btn weui_btn_plain_default">Button</a>
    <a href="javascript:;" class="weui_btn weui_btn_plain_primary">Button</a>

    <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary">Button</a>
    <a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">Button</a>
</div>

Cells (Cell)

Cell, list view, is used to display information in a list structure on the page, which is the most commonly used content structure on wap. Cell consists of multiple sections, each section includes a section header weui_cells_title and cells weui_cells.

Cell consists of three parts: thumbnail weui_cell_hd, body weui_cell_bd, and accessory weui_cell_ft. Cell uses an adaptive layout, and you can simply add the class weui_cell_primary to the parts that need to adapt:

List items with explanations

&lt;div class
<div class="weui_loading">
    <!-- :) -->
    <div class="weui_loading_leaf weui_loading_leaf_0"></div>
    <div class="weui_loading_leaf weui_loading_leaf_1"></div>
    <div class="weui_loading_leaf weui_loading_leaf_2"></div>
    <div class="weui_loading_leaf weui_loading_leaf_3"></div>
    <div class="weui_loading_leaf weui_loading_leaf_4"></div>
    <div class="weui_loading_leaf weui_loading_leaf_5"></div>
    <div class="weui_loading_leaf weui_loading_leaf_6"></div>
    <div class="weui_loading_leaf weui_loading_leaf_7"></div>
    <div class="weui_loading_leaf weui_loading_leaf_8"></div>
    <div class="weui_loading_leaf weui_loading_leaf_9"></div>
    <div class="weui_loading_leaf weui_loading_leaf_10"></div>
    <div class="weui_loading_leaf weui_loading_leaf_11"></div>
</div>
<p class="weui_toast_content">Loading data</p>
</div>
</div>

---

## Result Page (Msg Page)

A result page can generally be considered as a summary page at the end of a series of operational steps. The main function of the result page is to inform users of the results of the operation and processing, as well as necessary related details (which can be used to confirm whether the previous operations were correct); if the process is used to enable or disable some important functions, descriptive content related to the function can be added to the result page; in addition, the result page can also carry some additional value operations, such as providing lottery, following the public account and other functional entrances.

<div class="weui_msg"> <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div> <div class="weui_text_area"> <h2 class="weui_msg_title">Operation Successful</h2> <p class="weui_msg_desc">Content details can be arranged according to actual needs</p> </div> <div class="weui_opr_area"> <p class="weui_btn_area"> <a href="javascript:;" class="weui_btn weui_btn_primary">Confirm</a> <a href="javascript:;" class="weui_btn weui_btn_default">Cancel</a> </p> </div> <div class="weui_extra_area"> <a href="">View Details</a> </div> </div>


---

## Article Page

The text view displays large sections of text, which are usually the main content of the page. `Article` supports rich text styles such as paragraphs, multi-level headings, quotes, embedded images, ordered/unordered lists, and can respond to user selection operations.

When using `Article` in the WeChat client webview, it is necessary to ensure that the text has sufficient readability and recognizability, uses standard fonts, ensures sufficient paragraph spacing, and has no indentation at the beginning of paragraphs.

<article class="weui_article"> <h1>Main Title</h1> <section> <h2 class="title">Chapter Title</h2> <section> <h3>1.1 Section Title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute</p> </section> <section> <h3>1.2 Section Title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> </section> </article>


---

## Icons

<i class="weui_icon_msg weui_icon_success"></i> <i class="weui_icon_msg weui_icon_info"></i> <i class="weui_icon_msg weui_icon_warn"></i> <i class="weui_icon_msg weui_icon_waiting"></i> <i class="weui_icon_safe weui_icon_safe_success"></i> <i class="weui_icon_safe weui_icon_safe_warn"></i> <div class="icon_sp_area"> <i class="weui_icon_success"></i> <i class="weui_icon_success_circle"></i> <i class="weui_icon_success_no_circle"></i> <i class="weui_icon

❮ Cpp Construct Function Initial List Android Tutorial Xfermode Porterduff ❯