Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >微信风格的UI库 - WeUI

微信风格的UI库 - WeUI

dys

发布于 2018-04-02 09:40:00

发布于 2018-04-02 09:40:00

1.8K0

举报

文章被收录于专栏：性能与架构性能与架构

微信官方的设计团队设计制作以一套 UI 库，是与微信界面体验一致的基础样式库

包含button按钮、dialog对话框、toast提示框、article文章、icon图标等各种常用到的元素

对开发微信平台应用的团队是个好消息，可以直接使用，也可以在此基础上自定义开发

示例

对话框 Dialog

可以自定义标题和内容

消息提示框 Toast toast 用于提示一些小信息（操作的成功、失败、等待状态），会在几秒后自动消失

消息页面

用来通知用户操作的结果，和一些其他细节的提示信息

可以看到，整体风格完全和微信一致，做微信应用时可以考虑使用，节省了页面设计时间，又有很好的用户体验

官方提供的完整版示例：

网页URL weui.github.io/weui

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2015-11-07，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 JAVA高性能架构微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

WeUI — 微信网页设计样式库

为帮助网页开发者实现与微信客户端一致的视觉体验，并降低设计和开发成本，微信团队推出了网页设计样式库：WeUI。该样式库目前包含 button (按钮)、cell (单元格)、toast (浮层提示)

时见疏星

2018/06/01

2.3K0

微信网页设计样式库WeUI发布

为帮助网页开发者实现与微信客户端一致的视觉体验，并降低设计和开发成本，微信团队推出了网页设计样式库：WeUI。该样式库目前包含 button (按钮)、cell (单元格)、toast (浮层提示)

ytkah

2018/03/06

1.8K0

微信网页设计样式库WeUI发布

一斤代码深入理解系列（七）：微信小程序中使用微信风格样式库-WeUI

微信小程序音视频

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toa

极乐君

2018/02/05

1K0

一斤代码深入理解系列（七）：微信小程序中使用微信风格样式库-WeUI

微信官方开源UI库-WeUI

概述　　WeUI是一套同微信原生视觉体验一致的基础样式库，为微信Web开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。　　这有什么好处呢？其实从上面也可以看到官方的话，就是让你的应用跟微信官方版本更加统一，而没有违和感。当然，更重要的是，这样的库在某些时候可以提供你的开发效率哦。github地址：https://github.com/weui/weui 使用方法一：使用bower进行安装 bower insta

张善友

2018/01/26

3.2K0

WeUI教程/第三方扩展及其他UI框架对比

https 网络安全微信小程序 cdn

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。WeUI 为微信 Web 服务量身设计的h5框架。严格的讲它是一个css库。算一个精简的库，它是使用less编写，最终编译成css，压缩成weui.min.css

ytkah

2019/10/08

3.1K0

5款 React 实时消息提示通知(Message/Notification)组件推荐与测评

react javascript

本文完整版：《5款 React 实时消息提示通知(Message/Notification)组件推荐与测评》

蒋川@卡拉云

2022/06/04

6.2K0

5款 React 实时消息提示通知(Message/Notification)组件推荐与测评

【愚公系列】《微信小程序与云开发从入门到实践》027-WeUl库中的弹窗和提示类组件

腾讯技术创作特训营S11#重启人生

在现代应用中，弹窗和提示框是与用户沟通的重要工具。它们不仅可以传达关键信息、确认用户操作，还能有效地引导用户完成特定的任务。WeUI 作为专为微信生态设计的用户界面框架，提供了多种灵活的弹窗和提示类组件，使开发者能够轻松实现丰富的交互体验。

愚公搬代码

2025/01/19

1980

最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评

vue.js javascript

本文完整版：《最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评》

蒋川@卡拉云

2022/05/30

6.1K0

最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评

【to B管理端】消息反馈设计盘点

alert loading message popover tooltip

消息反馈按照消息的操作方角度分类，可分为主动消息和被动消息，主动消息是用户主动操作后，系统提示的消息，比如toolTip、toast、dialog。被动消息是用户被动提醒的系统消息，比如平台公告、站内信。

产品的技术小课

2021/11/02

1.4K0

【to B管理端】消息反馈设计盘点

android入门 — AlertDialog对话框

　　常见的对话框主要分为消息提示对话框、确认对话框、列表对话框、单选对话框、多选对话框和自定义对话框。　　对话框可以阻碍当前的UI线程，常用于退出确认等方面。　　在这里主要的步骤可以总结为：　　1.创建AlertDialog.Builder对象；　　2.调用setTitle()或setCustomTitle()方法设置标题；　　3.调用setIcon()设置图标；　　4.调用setPositiveButton()、setNegativeButton()或setNeturalButton()添加

Mister24

2018/05/14

1.2K0

小程序界的Bootstrap WeUI微信原生视觉体验样式库

微信 jquery ui 小程序

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

德顺

2019/11/13

2.2K0

一款移动端必不可少的超级轻量级框架

无需任何依赖,即可运行。由十月（Oct.cn）开发维护，全局使用flex布局，自适应兼容性强。PC和移动端都可使用,样式精美,可自定义动画/颜色/字体等

程序员老鱼

2022/12/02

1.8K0

小程序界面设计指南

微信微信小程序音视频

“上一期文章讲了小程序平台的特点以及场景需求，这一期文章主讲小程序设计规范，这是我通过阅读官方文档后归纳总结的，需要详细了解的小伙伴可以去看官方设计指南，文末有链接。” 文章大纲 01 用户体验要点 02 字体规范 03 控件规范 04 页面加载 05 页面状态总结资源 01 — 用户体验要点轻量、简洁、目标明确减少无关的设计元素对用户目标的干扰，每个页面都应该有明确的重点，便于用户每进入一个新页面时都能快速地理解页面内容。清晰明确地告知用户身在何处、又可以往何处去，确保用户在页面中游

企鹅号小编

2018/02/08

4.7K0

跟我学Android之十对话框

事件 android 布局对象设计

Toast 是一种浮于屏幕最上层，用于显示消息的窗体,u 主要用于显示各种动作的提示信息，比如： Ø 正在编写的邮件自动保存到了草稿箱 Ø 删除某条通讯了成功了 u Toast 窗体只是占据一部分的屏幕窗口 u 当前的 Activity 依然保持存在并能与用户交互 u Toast 在显示一段时间超时后会自动关闭

张哥编程

2024/12/17

1440

跟我学Android之十对话框

小程序的基础样式库-------WeUI

因为小程序的api描述都比较简单，并没有wxml及wxss的描述，一定会想小程序有没有一个UI库，类似于前端中的Bootstrap，MD，Semantic UI这样的框架UI库。有的，它就是WeUI。

honey缘木鱼

2018/06/19

5.7K0

Android开发笔记（七十一）区分开发模式和上线模式

许多开发者（包括博主在内）都是闷骚的程序员，为了开发调试方便，常常在代码里加上日志，还经常在页面上各种弹窗提示。这固然有利于发现bug、提高软件质量，但过多的调试信息往往容易泄露敏感信息，如用户的账号密码、业务流程的逻辑。所以从保密需要考虑，app在上线前都得去掉多余的调试信息，也就形成了上线模式。建立上线模式的好处有： 1、保护用户的敏感账户信息不被泄露； 2、保护业务逻辑与流程处理信息不被泄露； 3、把异常信息转换为更友好的提示信息，改善用户体验；上线模式不是简单的把调试代码删掉，而是通过某个开关来控制是否显示调试信息，因为app后续还得修改、更新、重新发布，这个迭代的过程也要不断调试来实现新功能。具体地说，就是建立几个公共类，代码中涉及到输入调试信息的地方，都改为调用公共类的方法；然后在公共类定义几个布尔变量作为开关，在开发时打开调试，在上线时关闭调试，如此便实现了开发模式和上线模式的切换。

aqi00

2019/01/18

7350

【愚公系列】《微信小程序与云开发从入门到实践》032-界面交互相关API的使用

腾讯技术创作特训营S11#重启人生

在数字化时代，微信小程序作为一种新兴的应用形态，凭借其轻便、易用的特性，迅速成为了各类企业和开发者的重要工具。为了提升用户体验，微信小程序提供了丰富的界面交互API，使开发者能够更灵活地设计和实现各种交互效果。

愚公搬代码

2025/01/23

2900

微信小程序----界面交互反馈API（wx.showToast(OBJECT)、wx.showModal(OBJECT)）（MUI消息框）

效果图 WXML <view class="tui-content"> <view class="tui-show-name"> <text class="tui-card-btn" bi

Rattenking

2021/02/01

1.1K0

微信小程序----界面交互反馈API（wx.showToast(OBJECT)、wx.showModal(OBJECT)）（MUI消息框）

基于Metronic的Bootstrap开发框架经验总结（6）--对话框及提示框的处理和优化

在各种Web开发过程中，对话框和提示框的处理是很常见的一种界面处理技术，用得好，可以给用户很好的页面体验，Bootstrap开发也一样，我们往往在页面新增、编辑、查看详细等界面使用弹出对话框层的方式进行显示数据，删除则可能使用一个提示确认框，如果操作成功，我们可以使用更丰富的提示框来处理，本篇主要对比说明在Bootstrap开发中用到的这些技术要点。 1、Bootstrap对话框的使用常规的Bootstrap有几种尺寸的对话框，包括默认状态的小对话框，中等宽度的对话框，和全尺寸的对话框几种，Bootstr

MonroeCode

2018/02/09

5.4K0

基于Metronic的Bootstrap开发框架经验总结（6）--对话框及提示框的处理和优化

5个最优秀的微信小程序UI组件库

微信小程序开源

开发微信小程序的过程中，选择一款好用的组件库，可以达到事半功倍的效果。自从微信小程序面世以来，不断有一些开源组件库出来，下面5款就是排名比较靠前，用户使用量与关注度比较高的小程序UI组件库。还没用到它们的你，可以关注和了解一下哦！

一斤代码

2018/08/21

7.5K0

5个最优秀的微信小程序UI组件库

相关推荐

WeUI — 微信网页设计样式库

更多 >

LV.1

这个人很懒，什么都没有留下～

作者相关精选

微信小程序示例 - 交互组件

加入讨论

的问答专区 >

1合伙人擅长4个领域

相关课程

一站式学习中心 >

AI驱动的TDSQL-Cserverless实战营

云原生数据库 TDSQL-C

微信公众号在线学习平台搭建实践_《硅谷课堂》

微信小程序应用实践_《锋运票务系统》

云托管 CloudBase Run

Serverless 容器服务

云数据库 MySQL