微信网页开发样式库.pdfVIP

微信⽹页开发样式库 微信⽹页开发样式库 概述 WeUI 是⼀套同微信原⽣视觉体验⼀致的基础样式库，由微信官⽅设 计团队为微信内⽹页 发量⾝设计，可以令⽤户的使⽤感知更加统 ⼀。在微信⽹页 发中使⽤ WeUI，有如下优势： 1.同微信客户端⼀致的视觉效果，令所有微信⽤户都能更容易地使⽤ 你的⽹站 2.便捷获取快速使⽤，降低 发和设计成本 3.微信设计团队精⼼打造，清晰明确，简洁⼤⽅ 该样式库⽬前包含 button、cell、dialog、progress、toast、 article、icon 等各式元素，已经在GitHub上 源。 使⽤⽅法 安装 ⽅法⼀：使⽤bower进⾏安装 bower install --save weui ⽅法⼆：使⽤npm进⾏安装 npm install --save weui 任选⼀种⽅法安装后，只需要在页⾯中引⼊ dist/style/weui.css 或者 dist/style/weui.min.css 其中之⼀即可。例如 !DOCTYPE html html head meta charset=UTF-8 meta name=viewport content=width=device-width,initial- scale=1,user-scalable=0 titleWeUI/title link rel=stylesheet href=path/to/weui/dist/style/weui.min.css/ /head body /body /html 开发 git clone https ///weui/weui.git cd weui npm install -g gulp npm install gulp -ws 运⾏ gulp -ws 命令，会监听 src ⽬录下所有⽂件的变更，并且默认 会在8080端⼝启动服务器，然后在浏览器打 http //localhost 8080/example。 元素类型 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 ： a href=# class=weui_btn weui_btn_primary 按钮/a a href=# class=weui_btn weui_btn_disabled weui_btn_primary 按钮/a a href=# class=weui_btn weui_btn_warn确认/a a href=# class=weui_btn weui_btn_disabled weui_btn_warn确认/a a href=# class=weui_btn weui_btn_default 按钮/a a href=# class=weui_btn weui_btn_disabled weui_btn_default 按钮/a div class=button_sp_area a href=# class=weui_btn weui_btn_plain_default 按钮 /a a href=# class=weui_btn weui_btn_plain_primary 按钮 /a a href=# class=weui_btn weui_btn_mini weui_btn_primary 按钮/a a href=# class=weui_btn weui_btn_mini weui_btn_default 按钮/a /div Cell