美文网首页小程序学习
WeUI for 小程序--使用教程

WeUI for 小程序--使用教程

作者: 夏日De雨 | 来源:发表于2019-01-06 18:49 被阅读2403次

    WeUI for 小程序–使用教程

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

    预览

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

    这里写图片描述

    项目地址

    https://github.com/weui/weui-wxss/

    如何使用

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

    这里写图片描述

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

    这里写图片描述

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

    这里写图片描述

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

    这里写图片描述

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

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

    这里写图片描述

    ---------------------

    作者:程诺

    来源:CSDN

    原文:https://blog.csdn.net/chq1988/article/details/73549027

    版权声明:本文为博主原创文章,转载请附上博文链接!

    相关文章

      网友评论

        本文标题:WeUI for 小程序--使用教程

        本文链接:https://www.haomeiwen.com/subject/nzzsrqtx.html