小程序使用tdesign

TDesign

第一步：npm install

第二步：npm i tdesign-miniprogram -S --omit=dev

第三步：修改project.config.json文件，然后工具栏中 项目---》重新打开此项目

    "es6": true,

    "packNpmManually": true,

    "packNpmRelationList": [

      {

        "packageJsonPath": "./package.json",

        "miniprogramNpmDistDir": "./miniprogram/"

      }

    ]

 第四步：构建 (工具--》构建npm)

 

第五步：修改配置信息

修改 app.json

将 app.json 中的 "style": "v2" 移除。

因为 该配置 表示启用新版组件样式，将会导致 TDesign 的组件样式错乱。

修改 tsconfig.json

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

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

 第六步:使用组件

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

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

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

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