小程序的基础样式库-------WeUI

因为小程序的api描述都比较简单，并没有wxml及wxss的描述，一定会想小程序有没有一个UI库，类似于前端中的Bootstrap，MD，Semantic UI这样的框架UI库。有的，它就是WeUI。

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

它的界面如图：

界面

下面我们重点讲解一下WeUI的使用方法：

1. 小程序版weui下载地址：https://github.com/Tencent/weui-wxss
   2.可以将整个文件下载下来，将其中的dist文件夹导入到独立的小程序中作为参考如下图
   整体文件
   注意：样式文件可直接引用dist/style/weui.wxss，或者单独引用dist/style/widget下的组件的wxss。
   3.将style文件夹拷贝到小程序根目录中，如下图。
   style目录结构

4.weui.wxss的引入方法
方法一.在app.wxss内或者需要的页面引入style/weui.wxss。

/**app.wxss**/
@import 'style.weui.wxss';

方式二：在app.wxss内或者需要的页面引入style/widget下的组件的wxss。

/**app.wxss---->引入button的wxss**/
@import 'style.widget.weui-button.weui-button.wxss';

注意：这样引入前提是weui.wxss放在全局的位置如图

引入位置

这样就可以简单的调用WeUI组件了。

组件