微信小程序样式库怎么开发

　　微信小程序是有很多样式的，那么微信小程序样式库是什么样的呢?微信小程序样式库怎么开发?以下就是具体的开发实例，快来看看吧。

　　目录

　　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.9 Icon

　　4 技术支持与反馈

　　概述

　　WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页开发量身设计，可以令用户的使用感知更加统一。在微信网页开发中使用 WeUI，有如下优势：

　　同微信客户端一致的视觉效果，令所有微信用户都能更容易地使用你的网站

　　便捷获取快速使用，降低开发和设计成本

　　微信小程序设计团队精心打造，清晰明确，简洁大方

　　该样式库目前包含 button、cell、dialog、progress、toast、article、icon 等各式元素，已经在 GitHub 上开源。访问 weui.github.io/weui/ 或微信扫码即可预览。

　　使用方法

　　安装

　　方法一：使用bower进行安装

　　bower install --save weui

　　方法二：使用npm进行安装

　　npm install --save weui

　　任选一种方法安装后，只需要在页面中引入 dist/style/weui.css 或者 dist/style/weui.min.css 其中之一即可。例如:

　　开发

　　git clone github/weui/weui.git

　　cd weui

　　npm install -g gulp

　　npm install

　　gulp -ws

　　运行 gulp -ws 命令，会监听 src 目录下所有文件的变更，并且默认会在8080端口启动服务器，然后在浏览器打开 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：

　　Cell，列表视图，用于将信息以列表的结构显示在页面上，是 wap 上最常用的内容结构。Cell 由多个 section 组成，每个 section 包括 section header weui_cells_title以及 cells weui_cells。

　　Cell 由 thumbnail weui_cell_hd、body weui_cell_bd、accessory weui_cell_ft 三部分组成，cell 采用自适应小程序布局，在需要自适应的部分加上 class weui_cell_primary即可：

　　Cell 可根据需要进行各种自定义扩展，包括辅助说明、跳转、单选、复选等。下面以带图标、说明、跳转的列表项，其他情况可以直接参考 example 下的代码：

　　带图标、说明、跳转的列表项

　　以上就是关于微信小程序样式库的开发实例了，具体流程和相应的小程序开发代码都写得非常清楚，希望能够真正帮助到大家，更多相关资料请关注微信小程序素材网。

　　怎样实现小程序点击切换样式

　　微信小程序输入框样式大全

　　微信小程序导航栏返回样式定制