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 ：

按钮

按

确认

确认

按钮