微信官方开源UI库-WeUI

概述

　　WeUI是一套同微信原生视觉体验一致的基础样式库，为微信Web开发量身设计，能够令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

 　　这有什么好处呢？其实从上面也能够看到官方的话，就是让你的应用跟微信官方版本更加统一，而没有违和感。固然，更重要的是，这样的库在某些时候能够提供你的开发效率哦。github地址：https://github.com/weui/weui

使用

方法一：

使用bower进行安装

bower install --save weui

方法二：

使用npm进行安装

npm install --save weui

开发

git clone https://github.com/weui/weui.git
cd weui
npm install -g gulp
npm install
gulp -ws

　　运行gulp -ws命令，会监听src目录下全部文件的变动，而且默认会在8080端口启动一个express服务器，而后在浏览器打开http://localhost:8080/example。 

　　手机预览

　　请用微信扫码

　　  

　　http://weui.github.io/weui/

 Button

Cell

Dialog

Progress
progress用于上传、下载等耗时而且须要显示进度的场景，用户能够随时中断该操做。

Toast

toast用于临时显示某些信息，而且会在数秒后自动消失。这些信息一般是轻量级操做的成功、失败或等待状态信息。

Msg Page

结果页一般来讲能够认为进行一系列操做步骤后，做为流程结束的总结性页面。结果页的做用主要是告知用户操做处理结果以及必要的相关细节（可用于确认以前的操做是否有误）等信息；若该流程用于开启或关闭某些重要功能，可在结果页增长与该功能相关的描述性内容；除此以外，结果页也能够承载一些附加价值操做，例如提供抽奖、关注公众号等功能入口。

Article
文字视图显示大段文字，这些文字一般是页面上的主体内容。Article支持分段、多层标题、引用、内嵌图片、有/无序列表等富文本样式，并可响应用户的选择操做。

在微信客户端webview中使用Article，必须保证文字有足够的可读性和可辨识性、使用规范字体、保证足够的段间距、段首无缩进。

Icon

Gulp实战和原理解析（以weui做为项目实例）http://i5ting.github.io/stuq-gulp/