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

相关文章

来自专栏ytkah

微信竟然还能当笔记用!【微信高级教程8】

  微信除了用来聊天沟通、刷朋友圈、看公众号外,很多朋友还不知道微信还能当笔记用吧?记笔记?没错,新版微信的收藏功能就隐藏这样的神秘技能。厦门就随ytkah一起...

26011
来自专栏ytkah

wordpress如何屏蔽wp-json(禁用REST API)

  最近网友问ytkah怎么在网站日志文件中发现蜘蛛爬行了很多次的/wp-json/目录,在robots文件中disallow掉了爬虫还是访问了那个目录,能不能...

3249
来自专栏carven

好用的分屏tab react-native-scrollable-tab-view

如果一个人每天都有惊喜的话,我今天的最大惊喜就是找到了一个react-native-scrollable-tab-view。 我们在写一个应用的时候,总是会有需...

770
来自专栏ytkah

微信公众平台悄悄地更新了自定义菜单功能

  微信公众号可以在会话界面底部设置自定义菜单,您可以按需设定菜单项,并可为其设置响应动作。您可以通过点击菜单项,收到您设定的消息,或者跳转到设定的链接。昨晚微...

3575
来自专栏知晓程序

开发 | 无需后端编码,手把手教你把 WordPress 做成小程序

知晓程序(微信号 zxcx0101)今天分享的这篇文章,将一步步讲解,如何将一个 WordPress 网站借助 REST API 开发微信小程序版。

843
来自专栏拂晓风起

一个类似backbone路由的纯净route ( 前端路由 客户端路由 backbone路由 )

1113
来自专栏花叔的专栏

小游戏能互相直跳,开源一个交叉营销组件

jocross.js 是微信小游戏上的一个交叉营销组件,找作者收录小游戏后,接入代码即可展示相关游戏入口(其他游戏能展示自己游戏入口),目前展示逻辑为随机展示三...

841
来自专栏ytkah

用A标签实现页面内容定位 点击链接跳到具体位置

  经常在维基百科等网站看到目录列表,点击链接会跳到具体的位置,小美眉一直在问是怎么做到的,其实挺简单的,用A标签实现页面内容定位就行了。实例参考微信营销理论手...

2604
来自专栏zhisheng

Java攻城狮是如何养成的?

经常逛知乎,收藏了不少学习方面的资源,以后有机会会慢慢的分享出来,让大家在学习的道路上少走些弯路。今天分享一篇文章《java攻城狮如何养成的?》,干货挺多的,,...

3044
来自专栏向治洪

React Native项目组织结构介绍

代码组织: 目录结构: . ├── components //组成应用的各个组件 │   ├── Routers.android.js //每个组...

1917

扫码关注云+社区