更新记录
0.7.3(2026-03-04) 下载此版本
Bug Fixes
Button: 去除多余动画效果 @novlan1 (#4305)Dialog: 修复确认/取消按钮不显示问题 @novlan1 (#4305)Theme: 修复index.css尺寸值错误的问题 @liweijie0812 (#4290)
0.7.2-beta.1(2026-02-27) 下载此版本
0.7.2(2026-02-26) 下载此版本
Features
Bug Fixes
Button: 修复icon.size不生效问题 @novlan1 (#4264)Form: 修改边距错误问题 @novlan1 (#4282)Search: 修复value未监听问题 @novlan1 (#4264)
平台兼容性
uni-app(3.6.17)
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | - | √ | √ | - |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 小红书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | - | √ | √ | - | - | - |
uni-app x(3.6.17)
| Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
|---|---|---|---|---|---|
| - | - | - | - | - | - |
其他
| 多语言 | 暗黑模式 | 宽屏模式 |
|---|---|---|
| √ | √ | √ |
文档
预览
扫码查看 ↓
其他平台同样支持,仅因平台审核等原因未能上架预览,不影响组件库正常使用。
安装
NPM 方式
npm i @tdesign/uniapp
UNI_MODULES 方式
已上传 插件 到 DCloud 插件市场,请打开插件详情页并点击使用 HBuilderX 导入插件。
使用
- 在
main.ts中引入样式文件
// CLI 模式
import '@tdesign/uniapp/common/style/theme/index.css';
// HBuilderX 模式
// import './uni_modules/tdesign-uniapp/components/common/style/theme/index.css';
也可以引入 rpx 单位的 less 文件,该文件与 tdesign-miniprogram 完全一致。
// CLI 模式
import '@tdesign/uniapp/common/style/theme/index.less';
// HBuilderX 模式
// import './uni_modules/tdesign-uniapp/components/common/style/theme/index.less';
- 在文件中使用
<template>
<t-loading />
</template>
<script lang="ts" setup>
import TLoading from '@tdesign/uniapp/loading/loading.vue';
</script>
只提供按需导入方式,不支持全量导入(全量导入在小程序下有兼容性问题)。
自动导入
在 pages.json 配置 easycom,可实现自动导入。
CLI 模式
使用 CLI 模式,即使用 node_modules 下的 @tdesign/uniapp 时,配置如下。
{
"easycom": {
"custom": {
"^t-(.*)": "@tdesign/uniapp/$1/$1.vue"
}
}
}
UNI_MODULES 模式
使用 uni_modules 下的 tdesign-uniapp 时,配置如下。
{
"easycom": {
"custom": {
"^t-(.*)": "@/uni_modules/tdesign-uniapp/components/$1/$1.vue"
}
}
}
编辑器提示
安装注册 TDesign 之后,在开发项目时,可以配合插件在VSCode等主流编辑器中达到提示组件名及API的效果。
推荐安装 Vue (Official) 插件,并在项目的 tsconfig.json 的 compilerOptions.types 属性中增加 @tdesign/uniapp/global,即可实现提示效果。
{
"compilerOptions": {
"types": [
"@tdesign/uniapp/global",
]
}
}
平台兼容性
| 平台 | Vue2 | Vue3 | H5 | Android | iOS | App-nvue | 微信小程序 | QQ小程序 |
|---|---|---|---|---|---|---|---|---|
| 支持情况 | ✅ | ✅ | ✅ | ✅ | ✅ | ⚠️ | ✅ | ✅ |
| 平台 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 小红书小程序 | 京东小程序 |
|---|---|---|---|---|---|---|
| 支持情况 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
浏览器兼容性
![]() Firefox |
![]() Chrome |
![]() iOS Safari |
![]() Samsung |
![]() Opera |
[ ]()Android Browser |
|---|---|---|---|---|---|
| Firefox >=104 | Chrome >=105 | iOS Safari >=12.2 | Samsung >=10.2 | Opera >=64 | Android Browser >=105 |
详情参见移动端组件库浏览器兼容性说明
模板项目
我们提供了多种开箱即用的模板项目,帮助你快速开始开发。
| 模板 | 描述 | 预览 |
|---|---|---|
| TDesign UniApp Starter | Vue3 + CLI 模式模板 - 通用类 | ![]() |
| TDesign UniApp Starter Apply | Vue3 + CLI 模式模板 - 活动报名 | ![]() |
| TDesign UniApp Starter Vue3 HX | Vue3 + HBuilderX 模式模板 | ![]() |
| TDesign UniApp Starter Vue2 CLI | Vue2 + CLI 模式模板 | ![]() |
| TDesign UniApp Starter Vue2 HX | Vue2 + HBuilderX 模式模板 | ![]() |
反馈
有任何问题,建议通过 Github issues 反馈或扫码加入用户微信群。
开源协议
TDesign 遵循 MIT 协议。

收藏人数:
https://github.com/Tencent/tdesign-miniprogram
https://www.npmjs.com/package/@tdesign/uniapp
下载插件并导入HBuilderX
下载示例项目ZIP
赞赏(1)





]()




下载 1800
赞赏 1
下载 11441091
赞赏 1873
赞赏
京公网安备:11010802035340号