微信官方UI库—WeUI

微信官方UI库—WeUI==分割==WeUI为微信Web服务量身设计概述WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信Web开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、progress,toast、article、icon等各式元素。使用方法一：使用bower进行安装bowerinstall--saveweui方法二：使用npm进行安装npminstall--saveweui开发gitclonehttps://github.com/weui/weui.gitcdweuinpminstall-ggulpnpminstallgulp-ws运行gulp-ws命令，会监听src目录下所有文件的变更，并且默认会在8080端口启动服务器，然后在浏览器打开http://localhost:8080/example。手机预览请用微信扫码http://weui.github.io/weui/Button按钮可以使用a或者button标签。wap上要触发按钮的active态，必须触发ontouchstart事件，可以在body上加上ontouchstart=""全局触发。按钮常见的操作场景：确定、取消、警示，分别对应class：weui_btn_primary、weui_btn_default、weui_btn_warn，每种场景都有自己的置灰态weui_btn_disabled，除此外还有一种镂空按钮weui_btn_plain_xxx，客户端webview里的按钮尺寸有两类，默认宽度100%，小型按钮宽度自适应，两边边框与文本间距0.75em：<ahref="javascript:;"class="weui_btnweui_btn_primary">按钮</a><ahref="javascript:;"class="weui_btnweui_btn_disabledweui_btn_primary">按钮</a><ahref="javascript:;"class="weui_btnweui_btn_warn">确认</a><ahref="javascript:;"class="weui_btnweui_btn_disabledweui_btn_warn">确认</a><ahref="javascript:;"class="weui_btnweui_btn_default">按钮</a><ahref="javascript:;"class="weui_btnweui_btn_disabledweui_btn_default">按钮</a><divclass="button_sp_area"><ahref="javascript:;"class="weui_btnweui_btn_plain_default">按钮</a><ahref="javascript:;"class="weui_btnweui_btn_plain_primary">按钮</a><ahref="javascript:;"class="weui_btnweui_btn_miniweui_btn_primary">按钮</a><ahref="javascript:;"class="weui_btnweui_btn_miniweui_btn_default">按钮</a></div>CellCell，列表视图，用于将信息以列表的结构显示在页面上，是wap上最常用的内容结构。Cell由多个section组成，每个section包括sectionheaderweui_cells_title以及cellsweui_cells。cell由thumbnailweui_cell_hd、bodyweui_cell_bd、accessoryweui_cell_ft三部分组成，cell采用自适应布局，在需要自适应的部分加上classweui_cell_primary即可：带说明的列表项<divclass="weui_cells_title">带说明的列表项</div><divclass="weui_cells"><divclass="weui_cell"><divclass="weui_cell_bdweui_cell_primary"><p>标题文字</p></div><divclass="weui_cell_ft">说明文字</div></div></div>Cell可根据需要进行各种自定义扩展，包括辅助说明、跳转、单选、复选等。下面以带图标、说明、跳转的列表项，其他情况可以直接参考example下的代码：<divclass="weui_cells_title">带图标、说明、跳转的列表项</div><divclass="weui_cellsweui_cells_access"><aclass="weui_cell"href="javascript:;"><divclass="weui_cell_hd"><imgsrc=""alt="icon"style="20px;margin-right:5px;display:block"></div><divclass="weui_cell_bdweui_cell_primary"><p>cellstandard</p></div><divclass="weui_cell_ft">说明文字</div></a><aclass="weui_cell"href="javascript:;"><divclass="weui_cell_hd"><imgsrc=""alt="icon"style="20px;margin-right:5px;display:block"></div><divclass="weui_cell_bdweui_cell_primary"><p>cellstandard</p></div><divclass="weui_cell_ft">说明文字</div></a></div>Dialog若系统的alert窗体无法满足网页的临时视图内容需求，则可以自定义实现与alert形式相似的dialog，并且在dialog中可以自定义地使用各种控件，来满足需求。<divclass="weui_dialog_confirm"><divclass="weui_mask"></div><divclass="weui_dialog"><divclass="weui_dialog_hd"><strongclass="weui_dialog_title">弹窗标题</strong></div><divclass="weui_dialog_bd">自定义弹窗内容<br>...</div><divclass="weui_dialog_ft"><ahref="javascript:;"class="weui_btn_dialogdefault">取消</a><ahref="javascript:;"class="weui_btn_dialogprimary">确定</a></div></div></div><divclass="weui_dialog_alert"><divclass="weui_mask"></div><divclass="weui_dialog"><divclass="weui_dialog_hd"><strongclass="weui_dialog_title">弹窗标题</strong></div><divclass="weui_dialog_bd">弹窗内容，告知当前页面信息等</div><divclass="weui_dialog_ft"><ahref="javascript:;"class="weui_btn_dialogprimary">确定</a></div></div></div>Progressprogress用于上传、下载等耗时并且需要显示进度的场景，用户可以随时中断该操作。<divclass="weui_progress"><divclass="weui_progress_bar"><divclass="weui_progress_inner_bar"style="50%;"></div></div><ahref="javascript:;"class="weui_progress_cancel"><iclass="weui_icon_cancel"></i></a></div>Toasttoast用于临时显示某些信息，并且会在数秒后自动消失。这些信息通常是轻量级操作的成功、失败或等待状态信息。<divid="toast"style="display:none;"><divclass="weui_mask_transparent"></div><divclass="weui_toast"><iclass="weui_icon_toast"></i><pclass="weui_toast_content">已完成</p></div></div><divid="loadingToast"class="weui_loading_toast"style="display:none;"><divclass="weui_mask_transparent"></div><divclass="weui_toast"><divclass="weui_loading"><!--:)--><divclass="weui_loading_leafweui_loading_leaf_0"></div><divclass="weui_loading_leafweui_loading_leaf_1"></div><divclass="weui_loading_leafweui_loading_leaf_2"></div><divclass="weui_loading_leafweui_loading_leaf_3"></div><divclass="weui_loading_leafweui_loading_leaf_4"></div><divclass="weui_loading_leafweui_loading_leaf_5"></div><divclass="weui_loading_leafweui_loading_leaf_6"></div><divclass="weui_loading_leafweui_loading_leaf_7"></div><divclass="weui_loading_leafweui_loading_leaf_8"></div><divclass="weui_loading_leafweui_loading_leaf_9"></div><divclass="weui_loading_leafweui_loading_leaf_10"></div><divclass="weui_loading_leafweui_loading_leaf_11"></div></div><pclass="weui_toast_content">数据加载中</p></div></div>MsgPage结果页通常来说可以认为进行一系列操作步骤后，作为流程结束的总结性页面。结果页的作用主要是告知用户操作处理结果以及必要的相关细节（可用于确认之前的操作是否有误）等信息；若该流程用于开启或关闭某些重要功能，可在结果页增加与该功能相关的描述性内容；除此之外，结果页也可以承载一些附加价值操作，例如提供抽奖、关注公众号等功能入口。<divclass="weui_msg"><divclass="weui_icon_area"><iclass="weui_icon_successweui_icon_msg"></i></div><divclass="weui_text_area"><h2class="weui_msg_title">操作成功</h2><pclass="weui_msg_desc">内容详情，可根据实际需要安排</p></div><divclass="weui_opr_area"><pclass="weui_btn_area"><ahref="javascript:;"class="weui_btnweui_btn_primary">确定</a><ahref="javascript:;"class="weui_btnweui_btn_default">取消</a></p></div><divclass="weui_extra_area"><ahref="">查看详情</a></div></div>Article文字视图显示大段文字，这些文字通常是页面上的主体内容。Article支持分段、多层标题、引用、内嵌图片、有/无序列表等富文本样式，并可响应用户的选择操作。在微信客户端webview中使用Article，必须保证文字有足够的可读性和可辨识性、使用规范字体、保证足够的段间距、段首无缩进。<articleclass="weui_article"><h1>大标题</h1><section><h2class="title">章标题</h2><section><h3>1.1节标题</h3><p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisaute</p></section><section><h3>1.2节标题</h3><p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,cillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.</p></section></section></article>Icon<iclass="weui_icon_msgweui_icon_success"></i><iclass="weui_icon_msgweui_icon_info"></i><iclass="weui_icon_msgweui_icon_warn"></i><iclass="weui_icon_msgweui_icon_waiting"></i><iclass="weui_icon_safeweui_icon_safe_success"></i><iclass="weui_icon_safeweui_icon_safe_warn"></i><divclass="icon_sp_area"><iclass="weui_icon_success"></i><iclass="weui_icon_success_circle"></i><iclass="weui_icon_success_no_circle"></i><iclass="weui_icon_info"></i><iclass="weui_icon_waiting"></i><iclass="weui_icon_waiting_circle"></i><iclass="weui_icon_circle"></i><iclass="weui_icon_warn"></i><iclass="weui_icon_download"></i><iclass="weui_icon_info_circle"></i><iclass="weui_icon_cancel"></i></div>