WeUI - 微信官方推出的免费开源 UI 组件库,上手简单,风格简约,在微信生态开发轻量项目的绝佳选择

article/2025/9/22 15:02:26

WeUI - 微信官方推出的免费开源 UI 组件库,上手简单,风格简约,在微信生态开发轻量项目的绝佳选择

微信早年发布的 UI 框架,对想要创建让微信用户感到熟悉的应用来说,是一个好选择。

关于 WeUI

WeUI 一款由腾讯微信团队开发的 UI 组件库,是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,这是专门被设计用来构建在微信运行的 H5 / 小程序等一系列应用上,所以这也是一款移动端的 UI 组件库。相信很多开发者都知道,WeUI 发布已经多年,发展至今已经迭代到 v2.5.15 版本,是一个成熟稳定、体验优雅的组件库。

WeUI 提供了一套现成的组件,如按钮、表单、列表和对话框等,针对移动使用进行了优化,并遵循微信的视觉风格,这些组件在我们使用微信的过程随处可见,用户也非常熟悉。

WeUI 组件预览

WeUI 的技术特性

  • 内置数十个微信风格的基础组件。这些组件无论是设计还是用户体验,都非常简洁,用户接受度也很高,直接使用这些组件,节省开发者大量时间
  • 内置布局、排版系统和图标。WeUI 提供了各种常见布局以及图文排版系统,这在开发中很实用
  • v2.2.0 增加了暗黑模式,通过添加属性 data-weui-theme 来控制
  • 作为一个纯 UI 组件工具,WeUI 可以搭配 Vue / React 等开发组件使用,也可以独立使用,取决于开发者的喜好
  • WeUI 官方提供视觉标准参考,提供 Sketch 与 PSD 基础样式库源文件。开发者或设计师可以使用 WeUI-Design 进行微信 Web 开发的原型设计、视觉设计等

WeUI 和第三方组件库相比,有哪些优势?

说到微信公众号开发或者是小程序项目开发,相信不少开发者马上想到的就是找一套像 Vant 这样大而全的移动端 UI 组件库,当然 Vant 是一款非常优秀的 UI 库,但这是一套专门为移动商城而打造的组件库,而很多公众号活动页面或者是小程序,实现的都是某一个点的功能,是很轻量的需求。这时候微信官方的 WeUI 的优势就出来了:

WeUI 组件预览

WeUI 开发上手

WeUI 最开始以一个 for web 的 UI 开发工具,使用也非常简单,下面展示最简单的开始方式:在 html 中引入 css 和 js 文件:

当然也可以用主流的工程化方式引入:

除了在 web 中,WeUI 也发展出了几个分支,以便开发者按需使用,分别是:

  • WeUI for 小程序 (weui-wxss)
  • WeUI for Work (企业微信版)
  • weui.js
  • react-weui

总的来说,目前前端发展依旧火热,像 WeUI 这样低调优质的,风格简洁的 UI 组件库,也有不少使用场景,特别是很多快速页面、用户表单操作提交等需求,能帮助开发者快速构建体验优秀的应用,不应该被我们遗忘。

免费开源和商用说明

WeUI 是一个由腾讯微信团队开发、维护的开源项目,采用 MIT 许可在 GitHub 上开源,任何个人或者公司的开发者都可以自由使用和修改代码。

原文链接:https://www.thosefree.com/weui


http://chatgpt.dhexx.cn/article/3Bqj3F1s.shtml

相关文章

weui学习总结——1、weui表单常用标签

前言:weui是一个专门用于开发手机移动web或微信的样式库。但是官方只提供了demo没有提供相关文档,所以这篇博客就当是方便以后开发而使用吧。 weui资源下载(也可以从官网下载): http://download.csdn.net/download/z…

微信小程序-weUI组件库

微信小程序的开发过程中,常常会出现很多重复性的功能翻来覆去地使用,那么直接用一套封装好的组件库,就能大大提升开发速度。 微信小程序的UI组件库有很多,可以参考下面这个内容: 微信小程序UI组件库合集 | 微信开放社…

微信小程序之WeUI组件库的使用

本文主要介绍微信小程序中的 WeUI组件库的具体使用方法,通过具体的示例代码进行介绍,相信能够对大家的学习和工作都有一定的参考学习意义,欢迎大家一起学习进步。 WeUI组件库 官方文档 一、前言 WeUI 是一套同微信原生视觉体验一致的基础样…

WeUI使用步骤

先去下载 小程序版weui下载地址:https://github.com/Tencent/weui-wxss可以将整个文件下载下来,将其中的dist文件夹导入到独立的小程序中作为参考如下图 注意:样式文件可直接引用dist/style/weui.wxss,或者单独引用dist/style/wi…

npm引入小程序官方WeUI组件库weui-miniprogram

1、打开cmd,在小程序根目录内,初始化npm npm init2、执行命令安装 npm 包: npm install --save weui-miniprogram3、安装完成后,在微信开发者工具中的菜单栏:工具 ------ 构建 npm : 4、在微信开发者工具中…

WeUI 详细介绍

WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。 WeUI 是一套同微信原生视觉体验一致的基础样式库,为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。 使用 方法一…

WeUI组件库

一套基于样式库weui-wxss开发的小程序扩展组件库,同微信原生视觉体验一致的UI组件库,由微信官方设计团队和小程序团队为微信小程序量身设计,令用户的使用感知更加统一。 ***全局布置UI组件库:1.引入app.json "useExtende…

微信小程序使用WeUI入门教程

微信小程序使用WeUI入门教程 在学习微信小程序过程中,很多组件的样式需要自己调整,且很多不是我们想要的样子。所以找到了WeUI这样的扩展组件库,预览了组件库,真的非常nice! 但是找不到怎么去引用。网上资料又很少&a…

微信公众号weui的使用

hello,i’m Shendi 最近在弄微信公众号,于是记录一下 文章目录 预览下载地址官方文档使用 预览 官方给的演示链接 https://weui.io/ 下载地址 https://github.com/Tencent/weui 将整个仓库下载下来即可 官方文档 https://github.com/Tencent/weui/wiki 使用 …

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

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

weui 开发文档

weui开发简单入门 一系列文档地址项目中使用步骤本地起测试demo 一系列文档地址 今天需要用到weui,这里记录一下开发文档地址 开发文档:http://old.jqweui.com/components js文档: https://github.com/Tencent/weui.js/blob/master/docs/R…

Maven 项目查找 jar 包是由哪个配置引入的

maven依赖结构图 1.项目查询所有的Maven查看JAR包的依赖关系 mvn dependency:tree 如查询junit.jar 是依赖谁导入进来的 这样就知道是被谁依赖而导入到项目的 其中“-”符号表示该包后面还有其它依赖包,“\-”表示该包后面不再依赖其它jar包了。 2.搜索具体的某一…

SpringBoot 打成的 jar 包和普通的 jar 包有什么区别

Spring Boot 中默认打包成的 jar 叫做可执行 jar,这种jar包可以通过可以通过命令(java -jar xxx.jar)来运行的,但这种jar包不能被其他项目所依赖,因为它和普通 jar 的结构不同,即使被依赖了也不能直接使用其…

jar包结构

闲来无事,看了一下jar包的结构,今天来学习一下 就用这个spring-aop的jar包来举例子: 首先是META-INF文件夹下的文件:INDEX.LIST INDEX.LIST:顾名思义,索引列表。这个应该就是描述了当前jar包下所有的资源…

jar包

第三方API就是别人写的类,把别人的众多class拿来直接用,然后做一个集合压缩包,也就是jar包 案例: public class Memo04 { public static void main(String[] args) { //今天你购买了 航空意外保险 //今天是 20230508 //购买了 5…

Maven 项目查找 jar 包是由哪个依赖引入的

文章目录 1. 命令格式2. 使用示例 直接使用mvn dependency:tree可以查看项目完整的依赖树。 1. 命令格式 mvn dependency:tree -Dverbose -Dincludes要查询的内容dependency:tree:表示树状显示。-Dverbose:表示可以显示所有的引用,包括因为…

jar包应该怎么打?

1》首先确保你的项目能正常启动并运行 2》选中你的项目,点右键,选export(导出),如下图: 3》选择runnable jar file,下一步,如下图: 4》如下图,直接看图: 5》…

jar包的结构

原模块 <parent><artifactId>cloud-demo</artifactId><groupId>cn.itcast.demo</groupId><version>1.0</version> </parent> <artifactId>feign-api</artifactId>maven install 在本地仓库就生成了下面的文件夹和…

java中的JAR包

使用JAR文件 JAR文件的全称是 Java Archive File&#xff0c;意思就是Java档案文件。通常JAR文件是一种压缩文件&#xff0c;与常见的ZIP压缩文件兼容&#xff0c;通常也被称为JAR包。JAR文件与ZIP文件的区别就是在JAR文件中默认包含了一个名为META-INF/MANIFEST.MF 的清单文…

什么是java包?java包作用是什么?

在Java中的包是一种封装一组类、子包和接口的机制,可用于组织一组相关的类和接口。那么具体什么是java包&#xff1f;java包作用是什么&#xff1f;本篇来简单解答下。 什么是java包&#xff1f; Java 包(package) package是一个为了方便管理组织java文件的目录结构&#xf…