小白如何上手几款微信小程序UI组件库

最新推荐文章于 2025-10-28 10:47:24 发布
原创 最新推荐文章于 2025-10-28 10:47:24 发布 · 410 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

文章目录

1. 环境信息

环境名版本信息
电脑系统win10专业版
微信开发者工具v1.02.1911180
node.jsv12.16.0
npm6.13.4

在往下阅读之前，建议先阅读熟悉以下知识内容：

  1. node.js
    node.js介绍和使用
  2. node.js的安装和配置(记得换成自己的路径)
    node.js安装配置
  3. 微信小程序如何使用npm包
    微信小程序如何使用npm教程
    微信小程序如何使用npm教程
  4. 微信小程序自定义组件的使用
    官方文档介绍

2. GO

2.1 新建项目

在这里插入图片描述

2.2 使用WeUI微信官方组件

在这里插入图片描述
官方文档：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/quickstart.html

2.21. 命令行进入该项目文件夹

在这里插入图片描述

2.22. npm初始化
npm init

然后填入信息
这个步骤的具体操作解释：
解释npm初始化

在这里插入图片描述

2.23. npm安装该组件包
npm install weui-miniprogram -S --production

在这里插入图片描述

2.24.npm包构建

接着设置使用npm模块
在这里插入图片描述
点击微信开发者工具菜单栏的工具，选择构建npm
在这里插入图片描述
成功
在这里插入图片描述
在这里插入图片描述

2.25. 使用WeUI其中的组件示例

首先要在app.wxss里面引入weui.wxss
在这里插入图片描述
去组件文档找一个它的组件，分别复制它提供的各个文件代码，这里以一个搜索框为举例
在这里插入图片描述
index.json文件中引入该组件
在这里插入图片描述
index.wxml文件复制官方的组件代码
在这里插入图片描述
在这里插入图片描述
按照官方文档中在index.js中添加相应的代码，然后保存运行
最后参数样式怎么改看文档组件改好就行了
在这里插入图片描述
在这里插入图片描述

2.3 使用VantUI

在这里插入图片描述
官方文档：
https://youzan.github.io/vant-weapp/#/quickstart
步骤与WeUI一样
安装命令

npm install @vant/weapp -S --production

这个npm构建不知道为什么那么久，可能电脑老了

在这里插入图片描述
接下来看文档用组件吧，很清楚。

2.4 使用WuxUI

在这里插入图片描述
官方文档：
https://wux-weapp.github.io/wux-weapp-docs/#/introduce

使用跟前面都是一样的，文档也很清楚

2.5 使用WussUI

在这里插入图片描述

官方文档：https://phonycode.github.io/wuss-weapp/quickstart.html

使用跟前面都是一样的，文档也很清楚

2.6 使用ColorUI

在这里插入图片描述
官网：https://www.color-ui.com/
写得非常棒，可惜文档还没写出来！，使用只能下载源码复制使用。

如何上手看它的github：
https://github.com/weilanwl/ColorUI
从“使用原生小程序开发”开始看

在这里插入图片描述

微信小程序UI组件库合集
轻风细雨_林木木
06-21 1915
今天无意间看到一个小程序UI总结地址，觉得挺好，有的时候要用总是找不到，今天收藏一下。https://developers.weixin.qq.com/community/develop/article/doc/000ecc775a86807f7ba9b7dc956c13https://developers.weixin.qq.com/miniprogram/dev/extended/weui/https://github.com/weilanwl/ColorUI https://youzan.github
微信小程序使用vant UI组件库
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
07-10 1094
Vant Weapp是由有赞前端团队开发的微信小程序UI组件库，提供按钮、表单等常用组件。安装需先配置Node.js环境，通过npm安装Vant Weapp后，需修改app.json并构建npm包。使用组件时需在json配置并引入。注意版本兼容、样式覆盖等问题，按需引入可优化性能。该组件库能提升开发效率，建议定期更新并参考官方文档。
Wux Weapp：零基础也能玩转的微信小程序UI框架，80+组件免费商用指南
最新发布
gitblog_01171的博客
10-28 735
Wux Weapp是一套专为微信小程序设计的**组件化UI框架**，提供80+常用界面组件，支持组件复用与灵活扩展。采用类Vue开发体验，让开发者无需复杂配置即可快速构建美观的小程序界面，特别适合新手和追求开发效率的团队使用。 ## ???? 为什么选择Wux Weapp？三大核心优势 ### ✅ 组件丰富且开箱即用 从基础的按钮（[src/button/](https://link.gitcod...
微信小程序使用第三方ui组件库
weixin_56733569的博客
01-11 1719
微信小程序使用第三方ui组件库，不用再手动写样式
几款好用的微信开发ui库
咦！一只菜鸡
07-24 4623
一、WeUI WEUI是一套基于样式库weui-wxss开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。 官方组件库能够满足基础的界面需求，但是，如果你想要更加饱满的视觉，更加活泼的动效，恐怕 WeUI 就满足不了你的需要了。 GitHub 地址：https://github.com/Tencent/weui 二、ColorUI 组件库 ColorUI 是一款高颜值组件库，侧重于视觉交互。比起..
从零开始编写一个微信小程序（微信开发者工具+JS+WuxUI组件库+云开发）万字整理，建议收藏！
孤影风晨的博客
08-16 2999
笔者利用假期时间，三周入门了前端和小程序，然后又花了很长时间和伙伴一起写程序，参加微信小程序大赛，虽然比赛结果不尽如人意，但是过程中学会了很多东西；了解了ES6、同步异步操作、组件、云开发等等技术，此文内为我开发魔镜小程序的代码和笔记，上传优快云方便日回顾......
微信小程序组件库Lin-UI：简洁设计与高效开发体验
资源摘要信息:"Lin UI 是一个基于微信小程序原生语法构建的组件库，致力于为开发者提供一套简洁、易用且遵循统一设计规范的组件集合。组件库的设计充分考虑了开发者的便捷性，允许开发者选择一次性加载全部代码或仅...
零基础小白用国内版Trae开发班务通微信小程序【满满干货，源代码】
weixin_45917851的博客
06-14 1454
利用Taro微信云开发的组合，即使是零基础开发者，也能快速构建出功能实用、安全可靠的班主任班级管理小程序。云开发极大地简化了后端基础设施的复杂度，让开发者能聚焦于业务逻辑和用户体验。本文提供的核心功能实现方案和权限控制要点，为开发类似教育管理应用提供了切实可行的技术路径。项目源码可在此基础上持续迭代，添加如课表管理、成长档案、问卷调查等更多实用功能。欢迎交流讨论！你对班主任管理小程序最期待的功能是什么？
ColorUi：丰富的微信小程序开源UI框架
资源摘要信息: "ColorUi是一个开源的微信小程序UI框架，其特点是样式丰富，能够满足开发者对微信小程序界面美观度和多样性的需求。开发者可以通过解压ColorUi提供的压缩包文件，在微信开发者工具中打开项目，进而...
微信小程序开发的学习资料收集
zhan9le的博客
06-28 1万+
小程序开发学习资料集合
【亲测免费】 Wux Weapp 微信小程序 UI 组件库推荐
gitblog_00095的博客
11-20 533
Wux Weapp 是一个开源的微信小程序 UI 组件库，旨在提供一套组件化、可复用、易扩展的 UI 组件，帮助开发者快速构建微信小程序应用。该项目主要使用 JavaScript 和 Less 作为主要的编程语言，其中 JavaScript 用于实现组件的逻辑功能，Less 用于样式管理。 ## 项目核心功能 Wux Weapp 的核心功能是为微信小程序开发者提供丰富的 UI 组件，这些组件包...
微信小程序UI组件库推荐
小乙的博客
08-08 4302
微信小程序UI组件库推荐
推荐微信小程序常用的几个UI组
纸言片语
03-01 3475
1.WeUI WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。 GitHub 地址：https://github.com/Tencent/weui 效果：https://weui....
微信小程序UI组件库精选：从Vant到WeUI
gitblog_00781的博客
08-22 1677
微信小程序UI组件库精选：从Vant到WeUI 本文深入分析了微信小程序开发中五大主流UI组件库的功能特性，包括Vant Weapp、WeUI WXSS、iView Weapp、Wux Weapp和Lin UI。通过详细的组件丰富度对比、技术特性评估、性能体积分析和社区生态考察，为开发者提供全面的选型参考。同时探讨了微信官方设计规范、组件化开发最佳实践以及自定义组件开发技巧，帮助开发者根据项目需求...
【微信小程序UI】Wux Weapp中有的UI效果出不来，可能是UI代码需要更新
yanglijuan_81的博客
08-29 335
说是要加full这个属性，但是效果一直出不来，对比了项目里的ui和现在的网上下载下来的ui文件，发现少了一个cascader-view。后面把级联的组件升级了一下，再把缺少的那个加上，就可以了！Cascader 级联选择器。普通的效果：同时显示两栏。
微信小程序-weUI组件库
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-09 8181
微信小程序的开发过程中，常常会出现很多重复性的功能翻来覆去地使用，那么直接用一套封装好的组件库，就能大大提升开发速度。 微信小程序的UI组件库有很多，可以参考下面这个内容： 微信小程序UI组件库合集 | 微信开放社区 (qq.com)https://developers.weixin.qq.com/community/develop/article/doc/000ecc775a86807f7ba9b7dc956c13但是很多组件库不稳定，天知道什么时候会停止维护和更新，所以这款weUI组...
22款常用微信小程序UI框架推荐！
热门推荐
黑马程序员官方博客
03-06 1万+
22个好看、常用的微信小程序UI组件库推荐！
7 个热门又优质的小程序 UI 组件库，社区、电商、工具各类都有！
HJSJR的博客
08-06 2823
如果你也是一名小程序开发者，当你打开一个高颜值的小程序时，是不是很想知道「这用的是哪一套 UI 组件库」呢？ 目前，网上已有不少开源的小程序组件库，但选择太多往往让人挑花了眼，反而不知哪一款才适合自己。今天，知晓君跟大家分享 7 款比较好用的组件库，如果你想开发，或是正在开发小程序，不妨了解一下，对比它们之间的长短与异同。 WeUI WeUI 是微信官方出品的组件库，它沿用了微信的视觉设计与...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值