WeUI下载和使用

一、介绍

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

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

WeUI是在微信终端非常出色的UI样式库，提供了非常多丰富的基础UI组件，最重要的是拥有了和微信一致的视觉体验，使得用户即使从微信切换到相关小程序，也不会觉得UI感到突兀。

它的界面如图：

二、下载配置

下载链接：https://github.com/Tencent/weui-wxss

1、将整个文件下载下来，将其中的dist文件夹导入到独立的小程序中作为参考如下图

 

注意：样式文件可直接引用dist/style/weui.wxss，或者单独引用dist/style/widget下的组件的wxss。

2、将style文件夹拷贝到小程序根目录中，如下图。

3、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组件了。