一斤代码深入理解系列(七):微信小程序中使用微信风格样式库-WeUI
时间:2022-04-26
本文章向大家介绍一斤代码深入理解系列(七):微信小程序中使用微信风格样式库-WeUI,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
WeUI
WeUI的官方演示地址是:https://weui.io/ WeUI的官方GitHub地址是:https://github.com/weui
WeUI最初是为HTML5的页面设计的样式库,现在微信小程序使用的样式机制也是css风格的样式机制(不过稍稍有些不一样的地方),WeUI理所当然的推出了WXSS版本。它的GitHub地址是:https://github.com/weui/weui-wxss
我们可以直接去Github上下载它的代码,也可以通过npm来方便的获取:
npm install weui-wxss
下载下来的代码中,包含了weui的源代码以及一个基于weui的示例小程序的:
示例小程序
里面包含了丰富的使用weui的示例代码,可以很好的学习weui提供的各个样式的使用。
我们可以通过微信web开发者工具来打开这个示例代码:
示例代码:
button样式
你的小程序主要是通过在你的app.wxss中导入weui.wxss来导入WeUI的样式的:
@import "style/weui.wxss";
之后,就可以在小程序的各个地方使用WeUI中定义的样式了。
- MySQL反连接的优化总结(r10笔记第51天)
- python基础知识——内置数据结构(列表)
- 【Go 语言社区】Go语言Slice去重
- 【Go 语言社区】Golang 语言再谈接口
- 【Go 语言社区】Golang 语言再谈常量
- 【Go 语言社区】HTML5 Canvas+JS控制电脑或手机上的摄像头实例
- MySQL Profile在5.7的简单测试(r10笔记第50天)
- 【Go 语言社区】Golang中interface判断nil问题
- 有趣的rownum测试(r10笔记第49天)
- 【Go 语言社区】关于Golang 数据缓存到redis内存数据库遇到的问题
- go中的读写锁RWMutex
- Centos7.4 版本环境下安装Mysql5.7操作记录
- 你必须知道的23个最有用的Elasticseaerch检索技巧
- Elasticsearch Jest实战深入详解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JavaScript 技术篇-chrome浏览器读取剪切板命令document.execCommand(‘paste‘)返回false原因及解决方法
- Linux 技术篇-文件大小查看方法实例演示,查看指定文件大小,查看列表下所有文件夹和文件的大小
- Python 技术篇-判断指定路径下的文件是否处于打开状态或占用状态实例演示
- Python 爬虫进阶篇-利用beautifulsoup库爬取网页文章内容实战演示
- Windows 技术篇-cmd强制关闭端口、解除端口占用方法,cmd查询端口相关的进程pid并杀死进程实例演示
- PL/SQL 数据库连接工具的下载、安装与使用实例演示
- JavaScript 技术篇-JSON字符串在线快速格式化查看实例演示,json.cn网址格式化json字符串
- Python 技术篇-含中文编码的代码运行方法,(unicode error) ‘utf-8‘ codec can‘t decode问题原因及解决方法
- Spring Boot Actuators
- 用图机器学习探索 A 股个股相关性变化
- Python 技术篇-连接oracle数据库并执行sql语句实例演示,python连接oracle数据库oci详细配置方法
- MySQL 技术篇-mysql数据库的安装、配置与使用实例演示
- JavaScript 技术篇-js代码获取当前操作系统信息、浏览器版本信息实例演示,windows NT版本对照表
- Oracle 数据库impdp导入数据库版本和dmp数据库文件版本不匹配问题解决方法,ORA-39142版本号不兼容、ORA-39000转储文件说明错误解决方法
- 实践总结:基于Kbone使用React同构开发小程序