目录

WeUI-for-小程序-使用教程

WeUI for 小程序–使用教程

WeUI for 小程序–使用教程

weUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。


预览

用微信web开发者工具打开dist目录(请注意,是dist目录,不是整个项目)

https://img-blog.csdn.net/20170621141541548?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hxMTk4OA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

项目地址

如何使用

1、下载程序代码,解压后可以看到如下目录:

https://img-blog.csdn.net/20170621141939909?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hxMTk4OA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

2、我们只需要将weui-wxss-master\dist\style\weui.wxss文件导入到小程序项目的根目录下:

https://img-blog.csdn.net/20170621142117896?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hxMTk4OA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

3、新建微信小程序项目,将weui.wxss文件导入到小程序项目的根目录下:

https://img-blog.csdn.net/20170621142324491?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hxMTk4OA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

4、在项目中引用:在app.wxss中加入weui.wxss的引用- @import ‘weui.wxss’;

https://img-blog.csdn.net/20170621143024115?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hxMTk4OA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

5、在项目中使用weui的样式:

可以按照下载代码中的实例使用了

https://img-blog.csdn.net/20170621143830060?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2hxMTk4OA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast