我们首先来看看WeUI的正式介绍：
WeUI是一组基本样式库，与微信的原始视觉体验一致。 微信的官方设计团队量身定制了微信和微信小程序中的网页，以使用户的使用感觉更加统一。在微信小程序的开发过程中，涉及的前端复杂样式界面问题需要使用UI框架，这可以在将来节省很多麻烦。
WeUI是一个开源的移动UI框架。因为它是微信正式提供的，所以与微信并无重大兼容性问题，并且每个组件的样式都与微信相同。与微信集成在一起可以为用户带来更好的体验。
使用步骤
1、在GitHub上下载程序代码，解压缩后，您可以看到以下目录：
Picture.png
2、我们只需要将weui-wxss-master \ dist \ style \ weui.wxss文件导入小程序项目的根目录：
Picture.png
3、创建一个新的微信小程序项目并将weui.wxss文件导入小程序项目的根目录：
Picture.png
Picture.png
4、在项目中引用：在全局app.wxss-@import“ weui.wxss”中添加对weui.wxss的引用；
Picture.png
5个根组件使用class =“ page”
6页骨架
7除此之外，它基于weui-的开头，后跟组件名称，例如class =“ weui-footer”
我是页脚
8组件的子组件样式，例如view.weui-footer组件还具有链接和版权信息。
上海物联网科技有限公司Copyright © 程序媛专用
9、特定组件在小程序中创建一个新项目，地址指向weui-wxss-master \ dist，您可以随时找到所需的效果，剩下的就是复制和粘贴或导入并从github下载。使用代码中的示例，项目中使用的weui样式如下：
Picture.png
示例代码：
Button 按钮，WeUI采用小程序原生的按钮为主体，加入一些间距的样式。 页面主操作 Normal 页面主操作 Disabled 页面次要操作 Normal 页面次要操作 Disabled 警告类操作 Normal 警告类操作 Disabled 按钮 按钮 按钮 按钮 按钮 按钮 按钮
预览框架WeUI文件：
Picture.png
文章结尾的好处：
[福利] 微信小程序选定的演示集合：