uni-ui · MiniApp Toolkit

特性

DCloud 官方维护，uni-app 生态标杆 UI 库
40+ 高质量组件，全端兼容（小程序/H5/App/nvue）
自动差量数据更新（Vue 组件特性，非 setData 手动更新）
wxs/bindingx 高性能交互优化（SwiperAction 等跟手组件）
背景停止优化（组件不可见时自动停止渲染资源）
uni.scss 主题扩展，支持全局样式变量
uni_modules 方式安装（HBuilderX 右键更新，无需引用注册）
npm 安装支持（@dcloudio/uni-ui）
集成 uni 统计免打点

详细文档

uni-ui — DCloud 官方跨端 UI 组件库#

资源概述#

uni-ui 是 DCloud 官方维护的 uni-app 跨端 UI 组件库，提供 40+ 高性能组件，覆盖微信/支付宝/百度/抖音/QQ 小程序 + H5 + App 全端场景。作为 uni-app 生态的标杆 UI 库，uni-ui 在性能优化方面有独特优势：自动差量数据更新（Vue 组件 vs 小程序 setData）、wxs/bindingx 高性能交互、组件不可见时自动停止渲染资源。

GitHub: dcloudio/uni-ui ⭐ 2,089 / Fork 665 / MIT License npm: @dcloudio/uni-ui v1.5.12 / 98 versions / 2026-03-26 modified 最近更新: 2026-07-27（持续活跃）

设计规范#

组件分类#

类别	组件
基础组件	Button, Icon, Title, Section, Tag, Badge, Link
布局组件	Row, Col, Grid, Card
表单组件	Easyinput, Combox, DataCheckbox, DataPicker, DataSelect, Forms, FormsItem, NumberBox
反馈组件	Popup, Popover, LoadMore, Transition
导航组件	NavBar, Pagination, SegmentedControl, Steps, SwipeAction, SwiperDot
数据展示	List, Collapse, Table
日期时间	DateTimePicker, Countdown, Dateformat

主题系统#

基于 uni.scss 全局样式变量
支持 $uni-primary、$uni-success、$uni-warning、$uni-error 等主题色变量
通过修改 uni.scss 实现全局主题切换

审核规范#

uni-ui 为标准 UI 组件库，不涉及特殊审核要求。构建产物为标准小程序代码，符合各平台审核规范。注意：

组件不涉及隐私 API 调用
无 WebView 外部链接跳转
表单组件需自行处理用户数据合规

开发指南#

安装#

方式一：uni_modules（推荐）

通过 DCloud 插件市场导入：https://ext.dcloud.net.cn/plugin?id=55

在 HBuilderX 中右键 → 安装插件，自动配置 easycom，无需手动引用。

方式二：npm

code

npm install @dcloudio/uni-ui

需在 vue.config.js 中添加：

code

module.exports = {
  transpileDependencies: ['@dcloudio/uni-ui']
}

基本使用（easycom 模式）#

code

<template>
  <view>
    <uni-button type="primary" @click="handleClick">按钮</uni-button>
    <uni-badge text="99+" type="error" />
    <uni-card title="标题">
      <text>内容区域</text>
    </uni-card>
  </view>
</template>

<script>
// easycom 模式下无需 import，直接使用
export default {
  methods: {
    handleClick() {
      uni.showToast({ title: '点击了按钮' })
    }
  }
}
</script>

基本使用（npm import 模式）#

code

import { uniBadge, uniCard } from '@dcloudio/uni-ui'

export default {
  components: { uniBadge, uniCard }
}

常见陷阱#

npm 安装需配置 transpileDependencies：CLI 项目默认不编译 node_modules 下的组件，不配置会导致条件编译失效
uni_modules vs npm 版本差异：下载最新组件仅支持 uni_modules 方式，非 uni_modules 版本最高支持到 1.2.10
nvue 兼容：部分组件在 nvue 原生渲染模式下表现不同，参考 nvue-uni-ui 分支
组件前缀冲突：与其他 uni-app 组件库（如 uview-plus）同时使用时需注意组件名前缀（uni- vs u-）
sass-loader 版本：vue-cli 项目需 sass-loader < 11.0.0，否则与 vue@2.6.12 不兼容

生态资源#

资源	说明
uni-app 官方文档	uni-app 框架完整文档
DCloud 插件市场	uni-app 生态插件中心
HBuilderX	DCloud 官方 IDE，最佳 uni-ui 开发体验
uni 统计	多端统计平台，使用 uni-ui 组件可免打点
Wot Design Uni	社区高star替代方案（80+组件）
uview-plus	社区替代方案（60+组件，nvue兼容）

版本更新#

v1.5.12（2026-03）：最新 npm 版本，持续维护
npm 历史：98 个版本，持续迭代
GitHub 活跃度：2026-07-27 最后推送，持续维护
发展趋势：作为 uni-app 官方 UI 库稳定迭代，组件数量增长较慢但质量稳定；社区更活跃的 Wot Design Uni / uview-plus 等第三方库在组件丰富度上已超越 uni-ui

支持平台