小程序的基础样式库-------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 条评论
登录 后参与评论

相关文章

来自专栏JavaEE

Intellij IDEA 使用教程

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

842
来自专栏一个会写诗的程序员的博客

webpack 极简教程(前端自动化构建)

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

881
来自专栏魏艾斯博客www.vpsss.net

WordPress 手动优化和插件优化 MySQL 数据库的方法

1152
来自专栏逆向技术

反调试手法之CreateProcess反调试

在学习Win32 创建进程的时候.我们发现了有一个进程信息结构体. STARTUPINFO. 这个结构体可以实现反调试.

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

如何动态加载js?

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

2465
来自专栏我的博客

TP入门第一天

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

2965
来自专栏互扯程序

跨域请求方案 终极版

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

2583
来自专栏CSDN技术头条

由浅入深学习JavaScript Debug技巧

我常常看到不少开发者不懂如何Debug JavaScript代码,因此决定写一篇博客为初学者介绍如何Debug。我希望这篇文章可以提供一些有用的信息。我尝试在本...

1769
来自专栏Web项目聚集地

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

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

2122
来自专栏zaking's

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

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

3637

扫码关注云+社区