WeUI for 小程序使用教程文档总结

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含按钮button、组件cell、弹框dialog、 进度条progress、 提示toast、文章article、弹出菜单actionsheet、图标icon等各式元素。

 

一、项目地址

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样式说明:

1、根组件使用class="page":

2、页面骨架组件使用class="page__xxx"(注意是两个下划线)

3、其他组件都已weui-开头后接组件名称,例如class="weui-footer"

 

4、组件的子组件样式,例如view.weui-footer组件还有链接和版权信息。

 

四、WeUI标签预览(具体应以WeUI样式标签为准):

红色表示出现次数比较多的标签

 

1、表单:

Button:

weui-btn:按钮

weui-btn mini-btn:小按钮

 

list:

weui-cells__title:列表组件标题

weui-cell__bd:标题文字

weui-cell__ft: 说明文字

 

Input:

weui-cells__title:列表组件标题

weui-check: 单选

weui-icon-radio: 单选图标

weui-cell__bd: 标题文字说明

weui-label: 列表

weui-input: 输入

weui-vcode-btn: 获取验证码按钮

weui-vcode-img: 验证码图片

weui-textarea:请输入文本

weui-select: 选择

 

Slider:滑动(参考小程序文档)

 

Uploader:

weui-uploader:上传

weui-uploader__title:图片上传

weui-uploader__info: 上传个数

weui-uploader__file: 上传文件

weui-uploader__img:上传图片

 

2、基础组件

Article:

weui-article:文章标签

weui-article__h1:标题

weui-article__title:章标题

weui-article__section:文章区域

weui-article__h3:节标题

weui-article__p:文字

weui-article__img:图片

 

Badge:徽章

weui-cells__title:列表组件标题

weui-cell__bd:组件列表行

weui-badge:徽章

 

Flex:布局

weui-flex:布局区域

weui-flex__item:布局选项

 

Footer:页脚

weui-footer:页脚名称

weui-footer__text:页脚内容

weui-footer__links:页脚链接

 

Gallery:画廊(参考小程序文档)

 

Grid:九宫格

weui-grids:九宫格区域

weui-grid__icon:九宫格图标

weui-grid__label:九宫格列表

 

Icons:图标

icon-box:图表区域

icon-box__title:图标标题

icon-box__desc:图标说明

 

Loadmore:加载更多

weui-loading:加载更多标签

weui-loadmore__tips:正在加载

 

Panel:面板

weui-panel__hd:面板页头

weui-panel__bd:面板主体

weui-media-box__title:面板标题

weui-media-box__desc:面板说明

weui-media-box__info__meta:面板底部文字说明

 

Preview:表单预览

weui-form-preview:表单预览区域

weui-form-preview__hd:表单预览页头

weui-form-preview__bd:表单预览主体

weui-form-preview__item:表单预览列表区域

weui-form-preview__label:表单预览列表标题

weui-form-preview__value_in-hd:表单预览页头内容

weui-form-preview__value:表单预览列表内容

 

Progress:进度条

weui-progress:进度条标签

weui-progress__bar:进度条

weui-progress__opr:进度条图标

 

3、操作反馈

ActionSheet:弹出式菜单

weui-btn-area:按钮标签区域

 

Dialog:对话框

weui-btn-area:按钮标签区域

weui-btn:按钮

 

Msg:提示页

weui-btn-area:按钮标签区域

weui-btn:按钮

weui-msg__icon-area:提示图标

weui-msg__text-area:提示区域

weui-msg__title:提示标题

weui-msg__desc:提示说明

weui-msg__opr-area:提示后操作区域

weui-msg__extra-area:额外区域

 

Picker:选择器

weui-btn-area:按钮区域

 

Toast:弹出式提示

weui-btn-area:按钮标签区域

weui-btn:按钮

 

4、导航相关:

Navbar:头部导航

weui-navbar:导航标签

weui-navbar__title:导航标题

weui-navbar__slider:导航滑块

weui-tab__panel:导航面板

weui-tab__content:导航内容

 

Tabbar:底部导航(参考小程序文档)

 

5、搜索相关

Searchbar:搜索栏

weui-search-bar:搜索栏区域

weui-search-bar__form:搜索栏表单

weui-search-bar__label:搜索栏列表

weui-icon-search:搜索栏图标

weui-search-bar__text:搜索栏文字

weui-cell__bd:搜索栏文本

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/473371.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何安装Pycharm官方统计代码行插件

最近一直想统计Pycharm的总计代码行数,找到了官方的统计行数插件,发现效果还不错。 官方代码统计插件指导: https://plugins.jetbrains.com/plugin/4509-statistic(英文版) (初级教程,大牛请忽略) ***该…

LeetCode 1690. 石子游戏 VII(博弈DP)

文章目录1. 题目2. 解题1. 题目 石子游戏中,爱丽丝和鲍勃轮流进行自己的回合,爱丽丝先开始 。 有 n 块石子排成一排。每个玩家的回合中,可以从行中 移除 最左边的石头或最右边的石头,并获得与该行中剩余石头值之 和 相等的得分。…

Python批量删除错误图片、修改文件名以及删除重复图片

一、批量删除错误图片: 代码如下: import osfor name in range(1,150):with open(C:\\Users\\adimin\\Desktop\\Pixiv_Img\\{}.png .format(str(name)), rb) as fp:data fp.read()if(len(data) 58):  # 查看一下错误图片的信息,看到错误…

char、varchar、nchar、nvarchar的区别

【整】char、varchar、nchar、nvarchar的区别 http://www.cnblogs.com/smjack/archive/2008/04/14/1152342.html 转载于:https://www.cnblogs.com/vivianlou/p/3729843.html

LeetCode 1691. 堆叠长方体的最大高度(排序+最大上升子序DP)

文章目录1. 题目2. 解题2.1 暴力超时解2.2 排序最长上升子序463 / 3709,前 12.5%1240 / 9290,前13.3%1. 题目 给你 n 个长方体 cuboids ,其中第 i 个长方体的长宽高表示为 cuboids[i] [widthi, lengthi, heighti](下标从 0 开始…

doctype声明、浏览器的标准、怪异等模式

doctype 标准(严格)模式(Standards Mode)、怪异(混杂)模式(Quirks Mode),如何触发&#xff0c;区分他们有何意义&#xff1f; 触发标准模式 1、加DOCTYPE声明,比如&#xff1a;<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xht…

python:文件操作

1. 文件操作介绍 说到操作文件我们肯定会想到流&#xff0c;文件的操作都是通过流来操作的。在python中文件的操作非常简单&#xff0c;并不像Java等其他语言一样有各种各样的流操作&#xff0c;我们直接使用open函数即可打开一个文件&#xff0c;然后进行各种操作&#xff0c…

使用LSTM建立seq2seq模型进行语言翻译

文章目录1. 数据处理2. 编码器、解码器数据2.1 编码器2.2 解码器2.3 模型3. 训练4. 推理模型5. 采样参考 基于深度学习的自然语言处理 1. 数据处理 读取数据 with open(deu.txt, r, encodingutf-8) as f:lines f.read().split(\n) print("文档有 {} 行。".format(…

【struts2】预定义拦截器

&#xff11;&#xff09;预定义拦截器 Struts2有默认的拦截器配置&#xff0c;也就是说&#xff0c;虽然我们没有主动去配置任何关于拦截器的东西&#xff0c;但是Struts2会使用默认引用的拦截器。由于Struts2的默认拦截器声明和引用都在这个Struts-default.xml里面&#xff0…

微信小程序页面跳转方法总结

微信小程序页面跳转目前有以下方法&#xff08;不全面的欢迎补充&#xff09;&#xff1a; 1. 利用小程序提供的 API 跳转&#xff1a; // 保留当前页面&#xff0c;跳转到应用内的某个页面&#xff0c;使用wx.navigateBack可以返回到原页面。 // 注意&#xff1a;调用 navig…

使用注意力机制建模 - 标准化日期格式

文章目录1. 概述2. 数据3. 模型4. 训练5. 测试参考 基于深度学习的自然语言处理本文使用attention机制的模型&#xff0c;将各种格式的日期转化成标准格式的日期 1. 概述 LSTM、GRU 减少了梯度消失的问题&#xff0c;但是对于复杂依赖结构的长句子&#xff0c;梯度消失仍然存…

微信小程序在当前页面设置其他页面的数据

如果其他页面用到的数据是 globalData&#xff0c; 那么直接在当前页面修改 globalData 数据即可。 如果其他页面用到的数据是 storage&#xff0c; 那么直接在当前页面修改 storage 数据即可。 场景&#xff1a;&#xff08;由 A 页面跳转到 B 页面&#xff09; 在 B 页面完…

牛客 数学实验(模拟)

文章目录1. 题目2. 解题1. 题目 链接&#xff1a;https://ac.nowcoder.com/acm/contest/10166/A 来源&#xff1a;牛客网 牛牛在做数学实验。 老师给了牛牛一个数字n&#xff0c;牛牛需要不断地将所有数位上的值做乘法运算&#xff0c;直至最后数字不发生变化为止。 请你帮牛…

css动画之波纹

样式定义&#xff1a; #ContactAbout { height: auto; position: relative; overflow: hidden; } #sectioncontact { display: block; width: 100%; position: relative; height: 700px; z-index: 10; }#sectioncontact .map { width: 370px; height: 280px; position: absolut…

牛客 奇怪的排序问题(单调栈/遍历)

文章目录1. 题目2. 解题1. 题目 链接&#xff1a;https://ac.nowcoder.com/acm/contest/10166/B 来源&#xff1a;牛客网 操场上有n个人排成一队&#xff0c;这n个人身高互不相同&#xff0c;可将他们的身高视为一个1到n的排列。 这时需要把队伍变成升序&#xff0c;也就是从…

Python 中,matplotlib绘图无法显示中文的问题

在python中&#xff0c;默认情况下是无法显示中文的&#xff0c;如下代码&#xff1a; import matplotlib.pyplot as plt# 定义文本框和箭头格式 decisionNode dict(boxstyle "sawtooth", fc "0.8") leafNode dict(boxstyle "round4", fc …

使用Marshal.Copy把Txt行数据转为Struct类型值

添加重要的命名空间: using System.Runtime.InteropServices; 先建立结构相同(char长度相同)的Struct类型用于转换: [StructLayout(LayoutKind.Sequential, Pack 1)]public struct Employee{[MarshalAs(UnmanagedType.ByValArray, SizeConst 6)]public char[] EmployeeId;[Ma…

牛客 XOR和(找规律)

文章目录1. 题目2. 解题1. 题目 链接&#xff1a;https://ac.nowcoder.com/acm/contest/10166/C 来源&#xff1a;牛客网 牛牛最近学会了异或操作&#xff0c;于是他发现了一个函数 f(x)x⊕(x−1)f(x)x\oplus (x-1)f(x)x⊕(x−1)&#xff0c;现在牛牛给你一个数 n&#xff0c…

采用contentprivider扫描手机SD卡的图片资源

Intent inten new Intent(Intent.ACTION_PICK,MediaStore.Images.Media.EXTERNAL_CONTENT_URI);startActivityForResult(inten,21);------------------------在onActivityResult中加入-------------------Uri uri data.getData();String[] filePath { MediaStore.Images.Med…

天池 在线编程 数组划分III(计数)

文章目录1. 题目2. 解题1. 题目 https://tianchi.aliyun.com/oj/231188302809557697/235445278655844965 给你一个整数数组和一个整数K&#xff0c;请你判断数组是否可以划分为若干大小为k序列&#xff0c;并满足以下条件&#xff1a; 数组中的每一个数恰恰出现在一个序列中…