记一次微信小程序引入腾讯UI组件爬坑

538 阅读1分钟

项目使用小程序官方typescript基础模板

一. 初始化项目

image.png

二. 安装小程序UI组件

npm i tdesign-miniprogram -S --production

三. 修改 app.json

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

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

四. 修改 tsconfig.json

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

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

五. 修改project.config.json

tip:小程序UI官网没有介绍,需要修改如下配置,miniprogramNpmDistDirminiprogram 为小程序文件的目录,初始化创建的时候自动生成的

image.png

project.config.json 新增如下配置

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

六. 构建npm

点击开发者工具中的菜单栏:工具 --> 构建 npm

image.png

执行成功之后目录中会生成miniprogram_npm 目录,既是对应的对应的package.jsonnpm

image.png

七. 使用组件

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

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

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

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

参考文献