A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.

Last update: Jan 2, 2023

Overview

WeUI - tailor-made for WeChat web service

Introduction

WeUI is an WeChat-like UI framework officially designed by the WeChat Design Team, tailor-made for WeChat Web development, in order to improve and standardize the experience for WeChat users. Including components such as button、cell、dialog、 progress、 toast、article、actionsheet、icon.

Documentations

WeUI documentation Wiki
WeUI design reference weui-design

Mobile demo

https://weui.io

Legacy version 1.x: https://weui.io/1.x

Legacy version 0.4.x: https://weui.io/0.4.x

Development

License

The MIT License(http://opensource.org/licenses/MIT)

Please feel free to use and contribute to the development.

Contribution

If you have any ideas or suggestions to improve Wechat WeUI, welcome to submit an issue/pull request.

Comments

WeUI新增组件需求
目前WeUI整理出来的组件有：

button

cell

dialog

toast

article

icon

使用场景是移动端，微信内。

我们知道，一套完整的Wap端UI库肯定不止以上这些组件，所以我们希望借助开源社区的力量，来丰富WeUI的组件库。

各位在开发微信内的Web应用时，希望使用哪些组件，可以提出建议，谢谢~

目前感谢@sinhe 同学提出“图片列表” #8，将加入我们的开发计划。
help wanted
opened by progrape 28
window.pageManager.go存在bug，拿官方提供的Demo做在线演示
chrome打开https://weui.io ，启动调试工具按照移动端的方式查看找到

<script type="text/html" id="tpl_list">

将

<h1 class="page__title">List</h1> // 修改HTML为 <h1 class="page__title"><a href="javascript:window.pageManager.go('home');" class="">List</a></h1>

找到

<script type="text/html" id="tpl_input">

将

<h1 class="page__title">Input</h1> // 修改HTML为 <h1 class="page__title"><a href="javascript:window.pageManager.go('list');" class="">Input</a></h1>

问题： OK，现在可以在【首页】、【列表】页面、【表单】页面，来回点击切换，点击次数不用超过3次，你会发现，页面乱了，本该进入首页的，进入列表页了，或者是本该进入列表页的，进入首页了。。。。。

我是没搞明白这是什么问题，求助有谁懂，怎么解决
opened by cgfeel 16
引入了2.1.3版本，打包的时候报错

building for production...Error processing file: static/css/app.961533fc18508d1a5b4a6edc8cbf30aa.css (node:40432) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 15): TypeError: Cannot read property 'toFixed' of undefined (node:40432) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. 引入了2.1.3版本，打包的时候报错

opened by dantine123 12
jQuery WeUI 发布啦

jQuery/Zepto 版本的WeUI初步完成，地址： http://lihongxun945.github.io/jquery-weui/

jQuery WeUI 使用官方的CSS，所有JS组件均是jQuery插件的标准写法，使用非常方便，几乎没有上手难度。我会保持定期更新，并和WeUI作者保持联系，大家不用担心突然废弃的情况。有任何问题大家可以通过Issue提给我，或者在官方QQ群中讨论： 478234996

目前采用jQuery是考虑到大家都比较熟，而且很多时候页面中默认就引入了。

opened by lihongxun945 11
建议.weui_tabbar样式添加 z-index

当 tab 项中有列表组件(.weui_select)时，它的选项会层叠在 tab 选项之上，建议给.weui_tabbar添加 z-index 属性。另外， Tabbar组件使用时必须外层要套个 div，样式设置为{position: absolute;top: 0;right: 0;bottom: 0;left: 0;}，否则.weui_tab_bd部分就会有问题。
suggest

opened by qiujy 9
亲，有没有类似小程序中的通讯录组件？

https://developers.weixin.qq.com/xcode/source/mp_weui?tabs=index_list%2Findex_list.js,index_list%2Findex_list.wxml&page=index_list%2Findex_list.html

https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/extended/component-plus/index-list.html

opened by guoxiangke 0
picker组件在桌面浏览器上不能点击

我们使用的taro开发企业微信h5,taro中的组件使用的是weui组件,该组件在手机端工作,在桌面浏览器如:webkit中点击无效. 改组件地址:https://weui.io/work/#picker, 已查明原因: `

{pickerItem}

` touch相关的事件部分浏览器不支持,但是现在企业微信开发的h5,用户群不止手机,也包括PC上使用,我添加了phantom-limb库零时解决了,期望weui的picker能支持桌面了浏览器

opened by tomnattle 5
`.weui-input` should hide spinners and arrows in firefox as well

The current .weui-input style does not hide spinners and arrows in Firefox when input type is number.

https://github.com/Tencent/weui/blob/e7bf215aaf1841318853e07670a9759fbd0eb7f6/src/style/widget/weui-cell/weui-form/weui-form_common.less#L35-L40

opened by b2nil 0

Releases(v2.5.15)

v2.5.15(Dec 26, 2022)
v2.5.15 (2022-12-26)

Features

feat: 加入色板less变量

feat: 色板新增红橙色

Bugfixes

fix: 弹窗标题缺少默认字体颜色

fix: weui-animate的keyframe名增加weui前缀

Source code(tar.gz)
Source code(zip)
v2.5.14(Sep 16, 2022)
v2.5.14 (2022-09-16)

Bugfixes

fix: 半屏组件的关闭图标兼容v2.5.13前版本的写法

Source code(tar.gz)
Source code(zip)
v2.5.13(Sep 15, 2022)
v2.5.13 (2022-09-15)

Bugfixes

fix: 修复ios16下text-align-last导致的问题

Source code(tar.gz)
Source code(zip)
v2.5.12(Sep 6, 2022)
v2.5.12 (2022-09-06)

Features

fix: 加入公安备案信息

Bugfixes

fix: toast、toptips层级调整至5500

Source code(tar.gz)
Source code(zip)
v2.5.11(Aug 16, 2022)
v2.5.11 (2022-08-16)

Features

feat: 优化slide半屏、loadmore、button组件的实现

feat: 工信部网站信息备案

Bugfixes

fix: 去掉弹窗适配无障碍focus时带系统默认聚焦样式

fix: 去掉分享签名api调用

Source code(tar.gz)
Source code(zip)
v2.5.10(Aug 2, 2022)
v2.5.10 (2022-08-02)

Features

feat: 半屏弹窗新增下拉类型

feat: uploader组件的上传图标大小从固定尺寸改为相对尺寸

Bugfixes

fix: 优化半屏弹窗样式代码

fix: 升级h5 example的zepto版本至1.2.0

Source code(tar.gz)
Source code(zip)
v2.5.9(Jun 16, 2022)
Features

feat: 升级toast组件、article组件、msg组件UI

feat: 增加css变量注册容器.wx-root

Bugfixes

fix: 修复flex布局

Source code(tar.gz)
Source code(zip)
v2.5.8(May 27, 2022)
Bugfixes

fix: 优化默认字体序列

Source code(tar.gz)
Source code(zip)
v2.5.7(May 27, 2022)
Bugfixes

fix: 默认字体名更新

fix: 按钮禁止长按

Source code(tar.gz)
Source code(zip)
v2.5.6(Apr 7, 2022)
Features

feat: 新增单选框、复选框、开关组件的置灰态

Bugfixes

fix: 优化半屏弹窗按钮布局，保证向前兼容

fix: 修复steps组件缺少初始化状态问题、新增icon-prev状态

fix: 优化底部悬浮按钮间距实现方式

fix: 去掉无用的weui-cell_access背景颜色点击态实现

fix: 优化example体验

Source code(tar.gz)
Source code(zip)
v2.5.4(Dec 10, 2021)
v2.5.4 (2021-12-10)

Bugfixes

fix: 修复若干UI细节问题

fix: 优化悬浮按钮、form、panel、cell、msg、select、switch、textarea、agree组件示例

Source code(tar.gz)
Source code(zip)
v2.5.3(Dec 8, 2021)
v2.5.3 (2021-12-08)

Features

feat: 升级form组件UI

feat: 升级switch组件UI

feat: 升级articleUI、新增列表类型

feat: cell组件新增副标题

feat: 半屏弹窗新增下拉关闭图标（见样式二）

Bugfixes

fix: 修复表单weui-agree组件对齐问题

Source code(tar.gz)
Source code(zip)
v2.5.2(Nov 29, 2021)
v2.5.2 (2021-11-29)

Features

feat: 升级article组件UI

feat: 底部悬浮按钮、半屏弹窗按钮支持垂直布局

feat: 新增transition模态显示动画

Bugfixes

fix: 表单组件验证码同意协议复选框优化无障碍体验

fix: 调整gallery组件底部安全间距、删除按钮增加点击态

fix: actionsheet组件适配刘海屏

fix: a11y热区去掉冗余背景声明

fix: 修复图标按钮整合

fix: 表单同意协议居中布局

fix: 提高weui icon组件的选择器权重，用来规避和weui-icon混搭使用的权重问题

Source code(tar.gz)
Source code(zip)
v2.5.1(Oct 11, 2021)
v2.5.1 (2021-10-11)

Features

feat: 新增关怀模式色板

feat: 半屏弹窗组件UI升级

feat: 升级按钮loading UI

feat: msg组件标题字重调整

feat: article新增无障碍整合焦点例子

Source code(tar.gz)
Source code(zip)
v2.5.0(Sep 17, 2021)
Features

feat: WeUI组件库适配无障碍

feat: WeUI组件库适配大字号

feat: 新增无障碍、热区工具类(见/style/base/a11y.less)

feat: 按钮组件UI升级：高度、圆角属性

feat: 新增底部悬浮按钮

feat: 统一各平台组件样式（涉及dialog、actionsheet）

feat: 构建支持Node.js 12+的环境

Bugfixes

fix: msg组件extra-area新增水平间距

fix: 修复toast文字场景默认宽度问题

Source code(tar.gz)
Source code(zip)
v2.4.4(Mar 23, 2021)
Features

feat: 升级半屏弹窗组件UI

feat: 升级msg组件UI

Bugfixes

fix: 修复半屏弹窗单个按钮的布局问题

fix: 修复actionsheet组件取消按钮字体颜色问题

fix: 调整上传组件边距

Source code(tar.gz)
Source code(zip)
v2.4.3(Feb 3, 2021)
v2.4.3 (2021-02-01)

Features

feat: 调整Loading组件UI

feat: Toast组件新增长文案场景、加载中场景升级UI

feat: 新增msg自定义区域，可加key-value、普通提示、cell等列表

feat: 表单状态新增当前位置报错场景

feat: 表单组件新增跳转列表项

feat: 新增链接点击态色值变量

feat: 更新License年份 & 提供rpx版本

Bugfixes

fix: 修复Input组件placeholde字体颜色

fix: 修复rpx版本下的demo展示问题

Source code(tar.gz)
Source code(zip)
v2.4.2(Nov 27, 2020)
v2.4.2 (2020-11-25)

Bugfixes

fix: 修复picker组件darkmode下的背景色适配问题

fix: 修复toast组件的旧版loading图标大小

fix: 修复msg组件英文文本词间断行问题

Source code(tar.gz)
Source code(zip)
v2.4.1(Nov 6, 2020)
Features

feat: 升级toast组件的UI

feat: 新增圆圈loading组件

feat: 升级button组件的loading UI

Bugfixes

fix: msg组件文本区域新增英文词间折行加破折号的效果

Source code(tar.gz)
Source code(zip)
v2.4.0(Jun 17, 2020)
v2.4.0 (2020-06-17)

Features

feat: 升级色板配色

Source code(tar.gz)
Source code(zip)
v2.3.0(Mar 5, 2020)
Features

feat: input的placeholder更改颜色

feat: 更改cell的点击态背景颜色

Bugfixes

fix: msg的title没有适配黑暗模式

fix: input placeholder的样式

fix: fix default 按钮的点击态

fix: form表单的验证码样式

fix: darkmode右滑组件、修复图片预览组件刘海屏安全间距问题

fix: 搜索框的文本没有适配黑暗模式

Source code(tar.gz)
Source code(zip)
v2.2.0(Feb 17, 2020)
Features

feat: DarkMode 黑暗模式适配。默认跟随系统，可在body添加属性data-weui-theme来控制，值为light/dark。(d2aa336)

feat: 不再对weui-btn_plain进行支持，可使用weui-btn代替(699609f)

Bugfixes

fix: 在 iphone se 下，不能看到确认按钮的问题 #816(a2c83d3)

Breaking Changes

feat: 不再对weui-btn_plain进行支持，可使用weui-btn代替(699609f)

Source code(tar.gz)
Source code(zip)
v2.1.4(Jan 21, 2020)
v2.1.4 (2020-01-20)

Features

feat: 更改weui-cell点击态的实现方式，需要点击态额外加weui-cell_active扩展类(0aa806d)

Bugfixes

fix: 修复弹窗组件在ios10下内容区域无法局部滚动的问题(9fe8971)

fix: 修复文本域计数器对齐问题(587c35c)

fix: 修复图片预览组件在刘海屏下安全间距的问题以及多个文字颜色问题(f923afb)

fix: 优化footer组件固定底部在刘海屏上的体验(1034346)

fix: 优化半屏弹窗的头部图标，使背景透明化，weui-icon-btn_close更名为weui-icon-close-thin，weui-icon-btn_more更名为weui-icon-more，weui-icon-btn_goback更名为weui-icon-back-arrow-thin(0c2c0c1)

fix: 修复半屏弹窗非刘海屏下的布局问题(ae86a50)

fix: 修复新表单底部提示区域链接颜色(ddf0a89)

fix: 修复weui-cell_access在新表单下的字体颜色被覆盖的问题(a993864)

fix: 去掉同意协议ios默认点击态(3863da6)

Breaking Changes

fix: 更新表单下默认链接字体颜色，去掉了weui-form的超链接默认色值。若需要使用原链接色，可对超链接加扩展类weui-link(a993864)

fix: weui-cells下方提示增加超链接默认颜色(5d22c51)

Source code(tar.gz)
Source code(zip)
v2.1.2(Sep 17, 2019)
Features

feat: 增加模拟选择框(3d081fd)

feat: 升级表单UI，新增form页面模板，cell新增weui-cells__group结构，加扩展weui-cells__group_form可显示表单新皮肤(59ac11f)

Style

style: 更正表单cell的点击态场景(eafb43e)

style: 更新表单demo样式(ba4e192)

style: 优化switch UI(0206f0c)

style: 增加agree未勾选时的提示动画(33af94c)

style: 优化actionsheet UI(d5b369c)

style: icon实现从字体图标平滑升级为SVG(717b46a)

style: 优化toast UI，布局改为flex，toast方块宽高单位改成px，不再相对当前字号(5a0bee8)

style: 优化弹窗 UI，自适应规则调整：与屏幕左右各留16px的安全距离，宽度自适应，最大值为320px(0c3b3e5)

style: 优化半屏组件UI(5dcca15)

Source code(tar.gz)
Source code(zip)
v2.0.1(Jul 15, 2019)
Features

feat: 增加组件半屏弹窗half-screen-dialog(a5e994b)

Style

style: 更新Picker UI

Source code(tar.gz)
Source code(zip)
v2.0.0(Apr 30, 2019)
【增强】颜色规范、字体大小规范、间距规范对齐微信7.0新视觉风格

【增强】更新按钮UI

【增强】按钮改为默认定宽184px，需要用回拉通型可加classweui-btn_block

【增强】新增行按钮UI

【增强】更新图标UI

【优化】 weui-msg布局改为flex，并适配刘海屏

【增强】 weui-msg新增提示区域weui-msg__tips-area

【增强】 weui-msg新增无图标展示场景

【增强】更新weui-search-bar UI

【优化】 weui-tab布局改为flex，并适配刘海屏

【增强】更新weui-dialog UI

【增强】更新weui-cell UI

【增强】更新weui-uploader UI

【修复】 weui-vcode-btn左边框无高清线处理

【修复】无weui-cells__title的相邻weui-cells之间的间距太大

【修复】 WeUI example、weui-article、weui-gallery、weui-actionshet、weui-picker等组件刘海屏适配问题

Source code(tar.gz)
Source code(zip)
v1.1.3(Jun 28, 2018)
【增强】 weui-msg的extra-area适配iphoneX

【修复】调整字体大小后，搜索框的icon没有居中 #606

【修复】 weui-msg的title和desc是英文的时候没有换行的问题

Source code(tar.gz)
Source code(zip)
v1.1.2(Apr 18, 2017)
【增强】 cell增加向左滑动出现按钮的场景 #559

【增强】 cell的高度改为45px

【增强】 actionsheet增加title及其样式优化

【增强】 readme的英文版

【优化】 form-preview的语义化问题 #602

【优化】 loading的svg放到同一个文件，以压缩代码

【修复】 input没有 / 结束 #598

【修复】 picker在字号变化时导致的错位现象及其样式优化

Source code(tar.gz)
Source code(zip)
v1.1.1(Jan 17, 2017)
【修复】 fix icon-safe的错乱问题

【增强】增加按钮loading状态

【增强】更新普通警告图标颜色

Source code(tar.gz)
Source code(zip)
v1.1.0(Nov 21, 2016)
【增强】新增兼容IE Edge版本的switch

【增强】增加组件 badge徽章

【增强】增加组件 slider滑块

【增强】增加组件 picker多列选择器

【优化】把radio和checkbox下的weui-cell的:active挪到weui-check__label

【优化】 src/navbar.less 更名为 src/weui-navbar.less

【优化】 src/tabbar.less 更名为 src/weui-tabbar.less

【优化】 loading的base64

【优化】去掉废弃和冗余的样式

【修复】 preview下，两个button并排时，高度有问题 (#462)

【修复】 button作为.weui-vcode-btn时的样式问题 (#519)

【修复】 sourcemap 为乱码的问题

【修复】 select的箭头没有居中的问题

【修复】 tabbar的间距样式

Source code(tar.gz)
Source code(zip)

Owner

Tencent

GitHub https://weui.io

A task board is considered to be one of the most successful tools for teamwork. Whether it's for work, a side project or even the next family vacation, we helps your team stay organized.We've got the flexibility and featuresto fit any team's style.

TaskBoard !Important! The project is in its initial stage. In the near future I'll be adding new features and upgrading the old ones to be more optima

2 Oct 11, 2022

A web-application I created to practice for my CCNA 201-300 exam. It includes most of the questions from the module exams. My goal was to create a fast and clean interface, with the option to combine different module, randomized questions and instant feedback,

CCNA 201-300 Practice A web-application I created to assist me with my studies for my CCNA 201-300 Exam. It was created with native HTML/CSS/JS. It in

12 Dec 7, 2022

This package includes the sensible ESLint configuration used by our team

TypeScript + Prettier ESLint configuration for CasterlyApp team (and others)

2 Jan 26, 2022

Team Empire offers an innovative and intuitive game based on puzzles solved by two players working in a team.

Team Empire offers an innovative and intuitive game based on puzzles solved by two players working in a team. The user can create an account to monitor their results and achievements. The whole idea of the product is to make the player think and develop his logical thinking.

Vocational school for computer programming and innovation

14 Aug 8, 2022

Generate wechat / wework pay signture for NodeJs

WXSIGN Generate wechat / wework pay signture The library uses strdm ?? to generate random strings of a specified length How to installtion? # yarn

8 Nov 17, 2022

🔍 Full stack engineers archive applet for Wechat.

Full Stack Engineers Archive Contributing We welcome you to join the development of this applet. Please see contributing document. ?? Also, we welcome

3 May 24, 2022

Crawl WeChat Moments and visualize friend interactions.

请注意：微信朋友圈内容可能涉及隐私，如果要使用本爬虫进行个人研究以外的其他活动，请仔细考虑可能带来的社会影响与法律后果。使用方法：配环境。 conda create -n friends conda activate friends conda install psutil conda inst

19 Nov 24, 2022

A jQuery Plugin for viewing pictures like Wechat moments

25 Nov 10, 2022

Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript

334 Dec 29, 2022

Place your Bob-ombs so they surround opposing Bob-ombs. Captured Bob-ombs change color and join your team. The player uith the most Bob-ombs at the end is the Hinner.

Bob-omb Reverse with Arduino MKR 1010 Wifi ?? @cbarange & @j-peguet | 5th January 2022 Intro Docs MQTT with Arduino ?? https://docs.arduino.cc/tutoria

3 Jan 13, 2022

A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.

Related tags

Overview

WeUI - tailor-made for WeChat web service

Introduction

Documentations

Mobile demo

Development

License

Contribution

Comments

Releases(v2.5.15)

v2.5.15(Dec 26, 2022)

v2.5.15 (2022-12-26)

Features

Bugfixes

v2.5.14(Sep 16, 2022)

v2.5.14 (2022-09-16)

Bugfixes

v2.5.13(Sep 15, 2022)

v2.5.13 (2022-09-15)

Bugfixes

v2.5.12(Sep 6, 2022)

v2.5.12 (2022-09-06)

Features

Bugfixes

v2.5.11(Aug 16, 2022)

v2.5.11 (2022-08-16)

Features

Bugfixes

v2.5.10(Aug 2, 2022)

v2.5.10 (2022-08-02)

Features

Bugfixes

v2.5.9(Jun 16, 2022)

Features

Bugfixes

v2.5.8(May 27, 2022)

Bugfixes

v2.5.7(May 27, 2022)

Bugfixes

v2.5.6(Apr 7, 2022)

Features

Bugfixes

v2.5.4(Dec 10, 2021)

v2.5.4 (2021-12-10)

Bugfixes

v2.5.3(Dec 8, 2021)

v2.5.3 (2021-12-08)

Features

Bugfixes

v2.5.2(Nov 29, 2021)

v2.5.2 (2021-11-29)

Features

Bugfixes

v2.5.1(Oct 11, 2021)

v2.5.1 (2021-10-11)

Features

v2.5.0(Sep 17, 2021)

Features

Bugfixes

v2.4.4(Mar 23, 2021)

Features

Bugfixes

v2.4.3(Feb 3, 2021)

v2.4.3 (2021-02-01)

Features

Bugfixes

v2.4.2(Nov 27, 2020)

v2.4.2 (2020-11-25)

Bugfixes

v2.4.1(Nov 6, 2020)

Features

Bugfixes

v2.4.0(Jun 17, 2020)

v2.4.0 (2020-06-17)

Features

v2.3.0(Mar 5, 2020)

Features

Bugfixes