微信小程序(typescript) npm添加Tdesign UI组件库

程序员君常笑

已于 2024-09-29 12:03:08 修改

阅读量4.3k

点赞数 14

分类专栏：微信小程序项目文章标签：微信小程序 typescript npm

于 2023-01-24 17:13:51 首次发布

本文链接：https://blog.csdn.net/m0_61078449/article/details/128757190

版权

微信小程序项目专栏收录该内容

10 篇文章

订阅专栏

最近，发现一个新的微信小程序UI组件库-TDesign。腾讯自家出品，颜值杠杆。网址如下：
https://tdesign.tencent.com/miniprogram/getting-started

安装

使用NPM

Node.js 安装包及源码下载地址为：https://nodejs.org/zh-cn/download/
Node.js 菜鸟教程网址：https://www.runoob.com/nodejs/nodejs-install-setup.html
检查npm是否安装成功

npm -version

在项目根目录上执行下面安装指令：

npm config set registry https://registry.npmmirror.com 
npm init
npm i tdesign-miniprogram -S --production

PS:网络环境不稳定或者速度慢，可能会导致下载过程中断或超时。使用国内的 npm 镜像，比如淘宝的 npm 镜像（cnpm）

project.config.js值设置npm_dist目录

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

安装完之后，需要在微信开发者工具中对 npm 进行构建：工具 - 构建 npm

如果出现‘miniprogram not found’错误，将程序更成下面结构，并设置setting如下。
在这里插入图片描述

{
  "setting": {
  	……
  "miniprogramRoot": "miniprogram/",
  "srcMiniprogramRoot": "miniprogram/"
  }
}

修改 app.json

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

修改 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>