WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序开发量身设计，可以令用户的使用感知更加统一。在微信网页开发中使用WeUI有如下优势。
·同微信客户端一致的视觉效果，令所有微信用户都能更容易地使用你的网站。
·便捷获取快速使用，降低开发和设计成本。
·微信设计团队精心打造，清晰明确，简洁大方。
WeUI样式库目前包含Button、Cell、Dialog、Progress、Toast、Article、Icons等元素。元素列表如图7-8所示。
1.ActionSheet
ActionSheet用于显示包含一系列可交互的动作集合，包括说明、跳转等。它由底部弹出，一般用于响应用户对页面的点击。
<p> <p></p> <p> <p> <p>示例菜单</p> <p>示例菜单</p> <p>示例菜单</p> <p>示例菜单</p> </p> <p> <p>取消</p> </p> </p></p>
ActionSheet的效果如图7-9所示。
图7-8 WeUI元素
图7-9 ActionSheet
2.Article
Article（文字视图）用于显示大段文字，这些文字通常是页面上的主体内容。Article支持分段、多层标题、引用、内嵌图片、有/无序列表等富文本样式，并可响应用户的选择操作。
<article> <h1>大标题</h1> <section> <h2>章标题</h2> <section> <h3>1.1 节标题</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 节标题</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>
Article的效果如图7-10所示。
3.Button
Button（按钮）可以使用a或者button标签。WAP上要触发按钮的active态，必须触发ontouchstart事件，可以在body上加上ontouchstart=""进行全局触发。
按钮常见的操作场景有：确定、取消、警示，分别对应weui_btn_primary、weui_btn_default、weui_btn_warn，每种场景都有自己的置灰态（weui_btn_disabled），除此还有一种镂空按钮weui_btn_plain_xxx。客户端webview里的按钮尺寸有两类，默认宽度100%，小型按钮宽度自适应，两边边框与文本间距0.75em。
<a href="javascript:;">按钮</a><a href="javascript:;">按钮</a><a href="javascript:;">确认</a><a href="javascript:;">确认</a><a href="javascript:;">按钮</a><a href="javascript:;">按钮</a><p> <a href="javascript:;">按钮</a> <a href="javascript:;">按钮</a> <a href="javascript:;">按钮</a> <a href="javascript:;">按钮</a></p>
Button的效果如图7-11所示。
4.Cell
Cell（列表视图）用于将信息以列表的结构显示在页面上，是WAP上最常用的内容结构。Cell由多个section组成，每个section包括section headerweui_cells_title以及cellsweui_cells。
Cell由thumbnailweui_cell_hd、bodyweui_cell_bd、accessoryweui_cell_ft等3部分组成，采用自适应布局，在需要自适应的部分加上classweui_cell_primary即可。
图7-10 Article
图7-11 Button
<p>带图标、说明、跳转的列表项</p><p> <a href="javascript:;"> <p> <img src="" > </p> <p> <p>cell standard</p> </p> <p> 说明文字 </p> </a> <a href="javascript:;"> <p> <img src="" > </p> <p> <p>cell standard</p> </p> <p> 说明文字 </p> </a></p>
Cell的效果如图7-12所示。
5.Dialog
Dialog又称modal，表现为带遮罩的弹框，可以分为Alert和Confirm两种。
Alert是警告弹框，功能类似于浏览器自带的alert弹框，用于提醒、警告用户简单扼要的信息，只有一个“确认”按钮。点击“确认”按钮后，关闭弹框。
Confirm是确认弹框，功能类似于浏览器自带的confirm和prompt的集合，可以用于让用户确认/取消，也可以让用户填写表单。
<p> <p></p> <p> <p> <strong>弹窗标题</strong> </p> <p>自定义弹窗内容<br>...</p> <p> <a href="javascript:;">取消</a> <a href="javascript:;">确定</a> </p> </p></p>
Dialog的效果如图7-13所示。
图7-12 Cell
图7-13 Dialog
6.Form
Form（表单）可以分成“输入型”和“选择型”两种。输入型包括单行文本（文本、数值、电话、密码等）、多行文本；选择型包括下拉选择、单选、多选、开关、日期时间等。在WeUI中，表单通常与Cell组件配合使用。
Label（表单字段），用于告知用户该字段的含义，除了可以通过placeholder属性实现外，还可以使用label。它放在表单元素左边，明确说明表单的含义。
Input（输入框），是表单中最常见的元素，表现为单行文本输入框，可以指定输入类型为文本（text）、数值（number）、电话（tel）、密码（password）等。WebView默认的输入框样式不统一且不太美观，所以WeUI通过类名.weui_input来设置单行输入框的样式，使其更符合微信风格，体验更佳。
Textarea（文本域），用作输入多行文本。不同于Input，在WeUI的设计中，文本域没有label，在placeholder中提示用户输入信息即可。通常，输入多行文本时都有字数限制，WeUI提供了相应的样式配合使用。
Radio（单选框），在WeUI的设计中，单选框列表通常是独立一组的，推荐左边文字，右边选中图标，用户只能选择其中一个选项。默认通过label标签的for属性来关联，无须额外编写JavaScript代码来实现切换选中的效果。
Checkbox（复选框），与Radio类似，默认也是通过label标签的for属性来关联选择。不同的是，Checkbox允许用户同时选择多个选项，推荐选中图标放在左边。
Select（选择框），功能与Radio类似，用于提供一组选项，让用户选择其中一个。不同的是，这些选项默认是隐藏的，当用户点击时，才会展开让用户选择。它通常是在选项较多或选项不太重要，不需要展示时使用。
Switch（开关），只有两个状态，用于让用户选择“开启”或“关闭”。它使用起来很简单，只需要给input标签加上.weui_switch类即可。
Uploader（上传组件），图片的展示由background-image写在.weui_uploader_file里，默认是background-size:cover。上传中的状态需要为.weui_uploader_file添加.weui_uploader_status。icon或文字都可放到它的子元素.weui_uploader_status_content中，它是上下左右居中。
Form的效果如图7-14所示。
7.Grid
Grid（九宫格），功能类似于微信钱包界面中的九宫格，用于展示有多个相同级别的入口。它包含功能的图标和简洁的文字描述。
<p> <a href="javascript:;"> <p> <img src="./images/icon_nav_button.png" > </p> <p> Button </p> </a> <a href="javascript:;"> <p> <img src="./images/icon_nav_cell.png" > </p> <p> Cell </p> </a></p>
Grid的效果如图7-15所示。
8.Msg Page
Msg Page（结果页）通常来说可以认为进行一系列操作步骤后，作为流程结束的总结性页面。结果页的作用主要是告知用户操作处理结果以及必要的相关细节（可用于确认之前的操作是否有误）等信息。若该流程用于开启或关闭某些重要功能，可在结果页增加与该功能相关的描述性内容。除此之外，结果页也可以承载一些附加价值操作，如提供抽奖、关注公众号等功能入口。
图7-14 Form
图7-15 Grid
<p> <p><i></i></p> <p> <h2>操作成功</h2> <p>内容详情，可根据实际需要安排</p> </p> <p> <p> <a href="javascript:;">确定</a> <a href="javascript:;">取消</a> </p> </p> <p> <a href="">查看详情</a> </p></p>
Msg Page的效果如图7-16所示。
9.Navbar
Navbar，顶部tab，当需要在页面顶部展示tab导航时使用，用法与Tabbar类似。
<p> <p> <p> 选项一 </p> <p> 选项二 </p> <p> 选项三 </p> </p> <p> </p></p>
Navbar的效果如图7-17所示。
图7-16 Msg Page
图7-17 Navbar
10.Panel
weui_panel由head（可选）、body、foot（可选）等3部分组成，主要承载了图文组合列表weui_media_appmsg、文字组合列表weui_media_text以及小图文组合列表weui_media_text。
body部分根据不同业务可自定义不同的内容。foot部分默认支持“查看更多”的样式，需要在weui_panel扩展一个weui_panel_access的类。
<p> <p>图文组合列表</p> <p> <a href="javascript:void(0);"> <p> <img src="" > </p> <p> <h4>标题一</h4> <p>由各种物质组成的巨型球状天体，叫做星球。星球有 一定的形状，有自己的运行轨道。</p> </p> </a> <a href="javascript:void(0);"> <p> <img src="" > </p> <p> <h4>标题二</h4> <p>由各种物质组成的巨型球状天体，叫做星球。星球有 一定的形状，有自己的运行轨道。</p> </p> </a> </p> <a href="javascript:void(0);">查看更多</a></p>
Panel的效果如图7-18所示。
11.Progress
Progress（进度条）用于上传、下载等耗时且需要显示进度的场景，用户可以随时中断该操作。
<p> <p> <p> <p ></p> </p> <a href="javascript:;"> <i></i> </a> </p></p>
以下代码模拟改变进度条的值。
$(function{ var progress = 0; var $progress = $('.weui_progress_inner_bar'); function uploading{ $progress.width(++progress % 100 + '%'); setTimeout(uploading, 20); } setTimeout(uploading, 20);}); Progress的效果如图7-19所示。
12.Tabbar
Tabbar（底部导航）通常用作Web应用的主界面底部导航，类似于微信主界面底部“微信”、“通讯录”、“发现”和“我”的导航区。每个功能包含一个图标和该功能简洁的文字描述。
<p> <p> </p> <p> <a href="javascript:;"> <p> <img src="path/to/images/icon_nav_button.png" > </p> <p>微信</p> </a> <a href="javascript:;"> <p> <img src="path/to/images/icon_nav_msg.png" > </p> <p>通讯录</p> </a> <a href="javascript:;"> <p> <img src="path/to/images/icon_nav_article.png" > </p> <p>发现</p> </a> <a href="javascript:;"> <p> <img src="path/to/images/icon_nav_cell.png" > </p> <p>我</p> </a> </p></p>
图7-18 Panel
图7-19 Progress
Tabbar的效果如图7-20所示。
13.Toast
Toast用于临时显示某些信息，并且会在数秒后自动消失。这些信息通常是轻量级操作的成功信息。
<p > <p></p> <p> <i></i> <p>已完成</p> </p></p>
Toast的效果如图7-21所示。
14.SearchBar
SearchBar（搜索栏）类似于微信原生的搜索栏，应用于常见的搜索场景。
<p> <form> <p> <i></i> <input type="search" place holder="搜索" required/> <a href="javascript:"></a> </p> <label for="search_input"> <i></i> <span>搜索</span> </label> </form> <a href="javascript:">取消</a></p>
SearchBar的效果如图7-22所示。
图7-20 Tabbar
图7-21 Toast
图7-22 SearchBar