小程序的基础样式库-------WeUI

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

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

它的界面如图:

界面

下面我们重点讲解一下WeUI的使用方法:

  1. 小程序版weui下载地址:https://github.com/Tencent/weui-wxss 2.可以将整个文件下载下来,将其中的dist文件夹导入到独立的小程序中作为参考如下图

整体文件 注意:样式文件可直接引用dist/style/weui.wxss,或者单独引用dist/style/widget下的组件的wxss。 3.将style文件夹拷贝到小程序根目录中,如下图。

style目录结构

4.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.wxss放在全局的位置如图

引入位置

这样就可以简单的调用WeUI组件了。

组件

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互扯程序

跨域请求方案 终极版

现在是资源共享的时代,同样也是知识分享的时代,如果你觉得本文能学到知识,请把知识与别人分享。

44030
来自专栏小程序之家

如何使用小程序导航

在日常开发小程序中,我们总不能吧所有数据都堆在首页。为此,需要一些二级三级页面。今天,我们来介绍介绍小程序比较重要的导航组件,使用导航组件,可以在小程序内外部进...

87050
来自专栏我的博客

TP入门第一天

1、学习要会提问 论坛提问,搜索解决 2、Tp优点 放便跨平台,URL支持多模式(放便SEO),自动加载(动态编译、节约系统效率),功能强大(AJAX,视图,分...

32650
来自专栏编程

Django分离JS代码,处理AJax错误请求

在写Django时候,遇到个错误,这里进行下记录。 都知道Django或者Flask中通过下面这种方式 {%blockjs%}{%endblock%} 能够直接...

38270
来自专栏更流畅、简洁的软件开发方式

如何动态加载js?

第三方的js文件,自己写的js文件,js越来越多了怎么办? 提出问题: 1、js文件太多了,每个页面都写<script src="...">太麻烦。 2、如果路...

39450
来自专栏about云

zookeeper思考与总结1:在其它组件的作用及hdfs对比

一、zookeeper在其它组件的作用 1.为什么会产生zookeeper zookeeper是模仿的谷歌的Chubby来解决分布式一致性的问题。2006年的时...

41250
来自专栏zaking's

走近webpack(3)--图片的处理

  上一章,咱们学了如何用webpack来打包css,压缩js等。这一篇文章咱们来学习一下如何用webpack来处理图片。废话不多说,咱们开始吧。   首先,咱...

38570
来自专栏Web项目聚集地

什么是跨域?解决方案有哪些?

同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同...

82920
来自专栏云计算教程系列

如何在Ubuntu 14.04中使用NodeJS,SailsJS和DustJS构建SPA(单页应用程序)

Node.js®是一个基于Chrome JavaScript运行时的平台,可轻松构建快速,可扩展的网络应用程序。Node.js使用事件驱动的非阻塞I / O模型...

15100
来自专栏JavaEE

Intellij IDEA 使用教程

正所谓工欲善其事,必先利其器,身为码农的我们,拥有得心应手的编辑器就好比如鱼得水,在万行代码中取bug首级就如观鱼赏花!IDEA就堪称是当世之神兵,自诩为最智能...

12920

扫码关注云+社区

领取腾讯云代金券