微信小程序中使用 TDesign 组件库

👨🏻‍💻 热爱摄影的程序员
👨🏻‍🎨 喜欢编码的设计师
🧕🏻 擅长设计的剪辑师
🧑🏻‍🏫 一位高冷无情的全栈工程师
欢迎分享 / 收藏 / 赞 / 在看！

TDesign 是腾讯设计团队推出的一套小程序 UI 组件库，提供了一套丰富的组件，可以帮助开发者快速搭建小程序页面。

TDesign 官网 - 快速开始

初始化 NPM

在微信开发者工具中新建一个小程序项目 tdesign-demo，如果项目中没有 package.json 文件，通过如下命令生成一个：

npm init -y

安装 TDesign 组件库

在项目根目录下执行以下命令，安装 TDesign 组件库：

npm i tdesign-miniprogram -S --production

执行完成后，将会在项目根目录下生成 node_modules 目录：

修改 project.config.json

在项目根目录下找到 project.config.json 文件，添加如下配置：

微信官方文档 - 小程序 - npm 支持 中关于 packNpmManually 和 packNpmRelationList 的说明：

• 配置 project.config.json 的 setting.packNpmManually 为 true，开启自定义 node_modules 和 miniprogram_npm 位置的构建 npm 方式。

• 配置 project.config.json 的 setting.packNpmRelationList 项，指定 packageJsonPath 和 miniprogramNpmDistDir 的位置。

{
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

然后在微信开发者工具中点击菜单栏的 工具 -> 构建 npm，等待构建完成后点击 确定：

可以看到在 miniprogram 目录下多了 miniprogram_npm 目录：

接着点击 详情 -> 本地设置，勾选 将 JS 编译成 ES5。然后重启微信开发者工具：

修改 app.json

将 app.json 中的 "style": "v2" 移除。因为该配置表示启用新版组件样式，将会导致 TDesign 的组件样式错乱。

修改 tsconfig.json

如果使用 TypeScript 开发，需要修改 tsconfig.json 指定 paths：

{
  "compilerOptions": {
    "paths": {
      "tdesign-miniprogram/*":["./miniprogram/miniprogram_npm/tdesign-miniprogram/*"]
    }
  }
}

使用组件

以按钮组件为例，只需要在 json 文件中引入按钮对应的自定义组件即可：

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

接着就可以在 wxml 中直接使用组件：

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