uview-plus v3.8.136：144 个组件的小程序 UI 库

做 uni-app 项目最耗时间的环节往往不是接口联调，是界面。按钮、弹窗、表单、日历这些零件本身不难，难的是同一套代码要分别在微信小程序、支付宝小程序和 H5 上看起来一致。自己手写一遍，改一个端的间距就得回头再测另外两端；随便挑一个原生小程序组件库，它大概率只认微信，换端就歇。

uview-plus 解决的就是这一层。它是 uView 2.0 的 Vue3 版本，组件统一走 uni_modules 规范，靠 easycom 自动按需引入——目录拷进项目，页面里直接写 <up-button>，不用 import，也不用改构建配置。我数了它的组件目录，144 个；许可为 MIT。

我把它在 Windows 11 上完整构建了两端：H5 演示站 29.39 秒出 773 个文件、11.28MB，微信小程序端 29.76 秒出 1905 个文件、11.12MB；同一份 H5 产物放进 WSL2 的 Ubuntu 里用 python3 托管，首页返回 200、耗时 0.0100 秒。有一点先写在明处：微信开发者工具我这台机器没登账号，小程序端只验证到「构建产物完整」这一层，没有真机预览。另外它不适合三类人，我在后面单列。

它是什么，和 uni-ui 差在哪

把三类库摆在一起最清楚：

• 原生小程序组件库：微信自定义组件形态，只能跑微信，换支付宝或抖音要另找方案
• Web 端组件库：直接操作 DOM，编译进小程序根本跑不起来
• uni-app 插件组件库：一套 Vue 单文件组件，编译时分别产出小程序端和 H5 代码，uview-plus 属于这一类

我按插件声明里的平台表核对了一遍：App 端的 vue、nvue、Android、iOS、鸿蒙都标了支持，H5 支持，小程序端支持微信、支付宝、头条、QQ、鸿蒙；百度、快手、京东、飞书、小红书标的是不支持。这个表是它自己声明的，我只实测了 H5 与微信小程序构建两条路径，其余平台要按目标端自行验证。

和 uni-ui 的区别在于「体量」和「业务组件」。uni-ui 是官方维护的轻量套装，够搭基础页面；uview-plus 的 144 个组件目录里塞了不少业务件：日历、商品 SKU、签名板、条形码、二维码、图片裁剪、PDF 阅读器、小说阅读器、虚拟列表。要搭一个带电商详情、带票据展示的小程序，这些组件能省掉大量自己写的时间。

版本号 3.8.136，许可 MIT，项目自述里提到近 720 Star。

144 个组件覆盖到哪

演示站首页按七类收口，我按源码目录逐个核对过：

• 基础：色彩、图标、图片、按钮、文本、布局、单元格、徽标数、标签、加载动画、加载页
• 表单：表单、日历、键盘、选择器、经典下拉框、级联选择器、评分、搜索、步进器、上传、验证码倒计时、输入框、文本域、复选框、单选框、开关、滑块、相册、时间选择器
• 数据：列表、虚拟列表、进度条、表格、倒计时、数字滚动、瀑布流
• 反馈：长按提示、引导、气泡、上拉菜单、警告、轻提示、通知栏、滑动单元格、折叠面板、弹窗、模态框、复制、悬浮按钮、下拉刷新、签名、隐私协议
• 布局：横向滚动、线条、卡片、遮罩、无网络提示、宫格、轮播、骨架屏、吸顶、分割线、盒子、分类 Tab
• 导航：下拉菜单、标签栏、返回顶部、导航栏、迷你导航栏、标签页、分段器、索引栏、步骤条、空状态、分页、树形
• 其他：富文本解析、Markdown 解析、验证码输入、拖拽排序、图片裁剪、图片加载、瀑布流加载、懒加载、头像、链接、过渡动画、二维码、优惠券、条形码、取色器、海报生成、商品 SKU、城市定位、PDF 阅读、小说阅读、视频播放

前缀有两个写法：up- 和 u- 都认。插件声明里的 easycom 规则是三条正则，把 u--、up-、u- 三种前缀统一映射到 u- 目录，所以老项目里写 u-button 也不用改页面。

我的测试环境

• Windows：Windows 11，Node 22.22.2，pnpm（锁文件是 9.0 版，对应 pnpm 9 及以上）
• Linux：WSL2 的 Ubuntu，内核 6.18.33.2，Node 22.22.1，Python 3.14.4
• 源码包：5.63MB 的 zip，解出后完整工程在 uview-plus-3.x
• 测试端：H5 演示站（实测渲染）+ 微信小程序构建产物（只验产物，未装开发者工具）
• 截图：桌面 1400 像素宽、手机 390 像素宽（2 倍图），共 9 张，正文里的图都是这台机器跑出来的

安装：Windows

解压后进源码目录，两条命令出演示站：

cd uview-plus-3.x
pnpm install
pnpm build:h5

构建开始会打印 Compiler version: 5.07（vue3），结束打印 DONE Build complete.，我这台机器耗时 29.39 秒。产物落在 dist\build\h5，773 个文件、11,831,783 字节。想看效果就起个静态服务，别双击 index.html：

cd dist\build\h5
python -m http.server 8090

浏览器打开 127.0.0.1:8090 就是演示站首页。构建日志里会有两条不影响结果的提示：已忽略静态资源目录：static/app-plus/，以及 lottie 组件里 Use of eval ... is strongly discouraged 的压缩警告——前者是 uni-app 按平台过滤静态资源，后者来自第三方 lottie 运行时，都不是你的代码问题。

小程序端用另一条：

pnpm build:mp-weixin

29.76 秒出 1905 个文件、11,662,440 字节，产物在 dist\build\mp-weixin，用微信开发者工具导入这个目录即可。

安装：Linux

命令和 Windows 一致，Node 版本按项目要求（Vite 5 时代的工程，Node 18 以上，我用 22.22.1）：

cd uview-plus-3.x
pnpm install
pnpm build:h5
cd dist/build/h5 && python3 -m http.server 8090

我这边 Linux 侧做的是托管验证，不是重新构建：把 Windows 上构建出来的 773 个文件原样放到 WSL2 里，用 python3 起服务探活：

• GET / 返回 200，耗时 0.0100 秒
• GET /assets/index-vH7Tx5fv.js 返回 200，耗时 0.0256 秒
• 文件数 773、总字节 11,831,783，与 Windows 侧完全一致

要提醒一句：如果你是 1 核 2G 那种小机器，别在服务器上跑 pnpm install 和构建。这套工程装完依赖是十几万个文件，构建峰值内存更高（插件自带 build:mp-weixin:mem 脚本，用 --max-old-space-size=8192 就是为这个准备的）。本地构建好、只把产物上传，是最省事的路子。

上手：三步接进自己的项目

第一步，拷目录。 把 src/uni_modules/uview-plus 整个复制到你项目的 src/uni_modules/（Vite 模板）或项目根的 uni_modules/ 下。

第二步，注册插件。 Vue3 的 main.js 里加两行：

import uviewPlus from '@/uni_modules/uview-plus'
app.use(uviewPlus)

第三步，引样式。 uni.scss 里引主题变量，App.vue 里引基础样式（注意 lang="scss"）：

@import '@/uni_modules/uview-plus/theme.scss';

<style lang="scss">
@import "@/uni_modules/uview-plus/index.scss";
</style>

然后在 pages.json 里配 easycom，页面里就能直接用标签，不用 import：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
      "^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
      "^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
    }
  }
}

<up-button text="确认提交" type="primary" @click="onSubmit" />

想改主题色不用覆盖组件类名，改 theme.scss 里的变量就行。

实测数据

• H5 构建：29.39 秒，773 个文件、11,831,783 字节（11.28MB）、118 个目录
• H5 产物构成：png 222、bcmap 168、js 141、css 118、properties 102、svg 9
• 小程序构建：29.76 秒，1905 个文件、11,662,440 字节（11.12MB）
• 小程序产物构成：js 568、json 281、wxml 277、wxss 264、png 222、bcmap 168
• 演示站首屏：DOMContentLoaded 358 毫秒、load 1148.9 毫秒、114 个请求、控制台报错 0、失败请求 0
• WSL2 托管：首页 200 / 0.0100 秒，主 JS 200 / 0.0256 秒
• 组件目录：144 个
• index.html：956 字节
• 成品包：12,281,658 字节（11.71MB）

那个 bcmap 168 + properties 102 不是多余文件：PDF 阅读器组件把 pdfjs 的字符映射表打进了产物，占了 11.28MB 里的相当一部分。只想搭普通页面的话，这个组件不引，产物体积会明显下来。

界面长什么样

首页是全量组件导航，七类折叠成竖排列表，顶部写着版本与定位：

按钮页是最常用的一个，五种状态色、镂空、细边、禁用、加载中、渐变、自定义尺寸都给了示例：

表单页能看出组件的精细度：下拉选择、单选复选、带字数统计的文本域、滑块验证、日期选择都是独立属性：

布局页给的是一行分栏的组合，基础分栏、分栏间隔、混合布局、分栏偏移、对齐方式都排了对照：

徽标数页把形状、显示方式、圆点、主题色、反转色都列了出来，999+ 与 1.5k 这类缩写也在：

时间选择器页是滚动列的实现，年／月／日／时／分各一列，选中行加粗，还带最小最大值与动态最小值示例：

手机视口 390 宽下的首页，底部标签栏是「组件／模板／我的」三个入口，和微信里的观感一致：

手机视口下的按钮页，长列表滚动后仍保持单一滚动条，没有双滚动条打架：

三个真实的坑

第一个，演示站首页会去公网拉一条实人认证脚本。

构建出来的 index.html 里，<head> 有一条同步脚本指向阿里云的实人认证 SDK（jsvm_all.js）。它不是 async 也不是 defer，浏览器会等它下载完才继续渲染。公网能连的时候没事（我这边首屏 load 1148.9 毫秒），可一旦部署在内网或断网环境，首屏就会卡在等这个请求超时。我做了对照实验：把这个域名拦截掉，页面照常渲染、正文长度不变、控制台 0 报错。所以解决办法很简单——把 index.html 里那一行 <script src="...jsvm_all.js"> 删掉，或者只在需要人脸核身的页面里引。

第二个，构建完的 H5 不能双击 index.html。

产物是 ES 模块，入口是 <script type="module">。用 file:// 协议打开，模块与样式全被同源策略拦掉，页面白屏、控制台刷 CORS 报错。必须起 http 服务（python -m http.server 或者任意静态服务器），这是 Vite 产物的通病，不是这个库的毛病。

第三个，小程序端 1905 个文件、11.12MB，直接塞主包会超限。

微信小程序主包上限 2MB，全量产物 11.12MB，必然要分包。省事的两个动作：一是只拷项目里真正用到的组件目录（easycom 本身就是按需引入，用不到的组件不会进包），二是把演示站、模板这类页面从 pages.json 里摘掉。另外构建时如果中途被杀，多半是内存不够，换 pnpm build:mp-weixin:mem（8GB 堆）再试。

两个小的：lottie 运行时会打 Use of eval 警告，是压缩器对第三方库的常规提示，不影响运行；static/app-plus/ 目录在 H5 构建时被忽略，属正常现象。

这几类人适合，这几类不适合

适合：

• 用 uni-app + Vue3 写小程序，一套代码要出微信和 H5 的
• 需要电商类的业务组件（SKU、优惠券、条形码、海报生成）又不想自己造
• 项目里已经有人在写 u- 前缀的老代码，想平滑换到 Vue3 版本
• 要覆盖鸿蒙小程序或 App 鸿蒙端的

不适合：

• 纯微信原生小程序项目。走原生自定义组件更直接，多套一层 uni-app 没收益
• Vue2 项目。这是 Vue3 版本，Vue2 请留在 uView 2.0
• 只做一个静态页、连表单都没有的。装个组件库的收益抵不过依赖体积
• 对包体积极敏感的。144 个组件全量引的话，两端产物都在 11MB 量级，必须按需挑

常见问题

源码获取

建议先转存到自己网盘再下载。手机上打开链接点右下角「保存到网盘」，回头在夸克 App 的「我的网盘」里下。