微信小程序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 html lang=en hea meta charset=UTF-8 meta name=viewport content=wi th= evice-wi th,initial- titleWeUI/title link rel=stylesheet href=path/to/weui/ ist/style/weui. /hea bo y /bo y /html 开发 git clone /weui/weui.git c weui npm install -g gulp npm install gulp -ws 运⾏ gulp -ws 命令，会监听 src ⽬录下所有⽂件的变更，并且默认会在8080端⼜启 动服务器，然后在浏览器打开 http://localhost:8080/example 。 元素类型 Button 按钮可以使⽤ a 或者 button 标签。wap 上要触发按钮的 active 态，必须触发 ontouchstart 事件，可以在 bo y 上加上 ontouchstart= 全局触发。 按钮常见的操作场景：确定、取消、警⽰，分别对应 class ：weui_btn_primary、weui_btn_ efault、weui_btn_warn，每种场景 都有⾃⼰的置灰态weui_btn_ isable ，除此外还有⼀种镂空按 钮 weui_btn_plain_xxx，客户端 webview ⾥的按钮尺⼨有两类，默认宽度 100% ，⼩型按钮宽度⾃适应，两边边框与⽂本间距0 .75em ： a href=# class=weui_btn weui_btn_primary按钮/a a href=# class=weui_btn weui_btn_ isable weui_btn_primary按 a href=# class=weui_btn weui_btn_warn确认/a a href=# class=weui_btn weui_btn_ isable weui_btn_warn确认/ a href=# class=weui_btn weui_btn_ efault按钮/a a href=# class=weui_btn weui_btn_ isable weui_btn_ efault按 iv class=button_sp_area a href=# cla