html微信开发样式,微信小程序WeUI.js网页开发样式库.pdf
微信小程序WeUI.js网页开发样式库.pdf
微信⼩程序WeUI.j s ⽹页开发样式库
⽬录
1 概述
2 使⽤⽅法
2.1 安装
2.2 开发
3 元素类型
3.1 Button
3.2 Cell
3.3 Dialog
3.4 Progress
3.5 Toast
3.6 Msg Page
3.7 Article
3.8 ActionSheet
3. Icon
4 技术⽀持与反馈
概述
WeUI 是⼀套同微信原⽣视觉 验⼀致的基础样式库，由微信官⽅设计团队为微信内
⽹页开发量⾝设计，可以令⽤户的使⽤感知更加统⼀。在微信⽹页开发中使⽤
WeUI ，有如下优势：
同微信客户端⼀致的视觉效果，令所有微信⽤户都能更容易地使⽤你的⽹站
便捷获取快速使⽤，降低开发和设计成本
微信设计团队精⼼打造，清晰明确，简洁⼤⽅
该样式库⽬前包含 button 、cell、dialog、progress、toast 、article 、icon 等各式元素，
已经在 GitHub 上开源。访问 http://weui .github .io/weui/ 或微信扫码即可预览。
使⽤⽅法
安装
⽅法⼀：使⽤bower进⾏安装
bower install --save weui
⽅法⼆：使⽤npm进⾏安装
npm install --save weui
任选⼀种⽅法安装后，只需要在页⾯中引⼊ dist/style/weui .css 或者
dist/style/weui .min .css 其中之⼀即可。例如:
< !DOCTYPE html>
按钮常见的操作场景：确定、取消、警⽰，分别对应
class ：weui_btn_primary、weui_btn_ efault、weui_btn_warn，每种场景
都有⾃⼰的置灰态weui_btn_ isable ，除此外还有⼀种镂空按
钮 weui_btn_plain_xxx，客户端 webview ⾥的按钮尺⼨有两类，默认宽度
100% ，⼩型按钮宽度⾃适应，两边边框与⽂本间距0 .75em ：