TDesign 小程序组件库：腾讯设计体系接入指南

TDesign 是腾讯开源的设计体系，tdesign-miniprogram 是其适配微信小程序的组件库。遵循 MIT 协议，提供按钮、表单、导航、反馈、数据展示等全套企业级组件，开箱即用。

一、项目官方信息

二、官方图片

TDesign 官方 Logo：

TDesign 组件示例小程序预览：

三、环境要求

• 微信开发者工具。
• 微信小程序基础库 ^2.6.5 或更高。
• npm（用于安装组件包）。

四、完整部署/接入步骤

1. 安装

小程序已支持 NPM，按官方文档 https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html 操作：

npm i tdesign-miniprogram -S --production

官方建议使用 NPM，不再推荐「源码拷贝」方式。

2. 构建 NPM

在微信开发者工具中：菜单「工具 → 构建 npm」。

3. 注册组件

以按钮组件为例，在页面 JSON 中引入：

{
  "usingComponents": {
    "t-button": "tdesign-miniprogram/button/button"
  }
}

4. 页面中使用

<t-button theme="primary">主要按钮</t-button>

5. 全局引入（可选）

在 app.json 中全局注册常用组件。

6. 预览示例项目

克隆仓库后：

npm install
npm run dev

打开微信开发者工具，把 _example 目录添加进去即可预览。

⚠️ 示例需要已开通「微信同声传译」插件权限的 AppID；若无法使用，在 app.json 中移除 plugins 配置。

五、使用方法

常用组件路径

{
  "usingComponents": {
    "t-button": "tdesign-miniprogram/button/button",
    "t-cell": "tdesign-miniprogram/cell/cell",
    "t-dialog": "tdesign-miniprogram/dialog/dialog",
    "t-navbar": "tdesign-miniprogram/navbar/navbar",
    "t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
    "t-input": "tdesign-miniprogram/input/input"
  }
}

主题与定制

TDesign 支持通过 CSS 变量定制主题色，见官方文档。

其他平台版本

TDesign 同时提供 Vue3 / React / uni-app 等版本，见 https://github.com/Tencent/tdesign 。

六、常见问题 FAQ

1. 组件不显示？ 在微信开发者工具「工具 → 构建 npm」后再编译；确认页面 JSON 的 usingComponents 路径正确。

2. 提示基础库版本过低？ TDesign 要求基础库 ^2.6.5，在详情里把调试基础库版本调高。

3. 推荐用源码拷贝方式吗？ 不推荐，官方建议用 NPM 安装。

4. 示例项目跑不起来？ 需要「微信同声传译」插件权限；没有就在 app.json 删 plugins 配置。

5. 支持主题定制吗？ 支持，通过 CSS 变量覆盖主题色，文档有详细说明。

6. 有 uni-app 版本吗？ 有，TDesign 提供 uni-app 版本，见 TDesign 主仓库。

七、跳转链接

• GitHub 仓库：https://github.com/Tencent/tdesign-miniprogram
• 官方文档：https://tdesign.tencent.com/miniprogram/overview
• npm：https://www.npmjs.com/package/tdesign-miniprogram
• TDesign 主仓库：https://github.com/Tencent/tdesign
• 反馈：https://github.com/Tencent/tdesign-miniprogram/issues