一、介绍
因为小程序的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组件了。