自记录详细过程 tdesign ui—小程序引入使用的方法

一、安装

先使用默认的基础模板生成一个空白小程序

这几个都可以

接下来要使用tdesign,则需要用npm安装

1、初始化生成package.json（没有的情况下）

命令行输入

npm init -y

2、终端再次输入如下安装指令

npm i tdesign-miniprogram -S --production

安装后，会在项目根目录下生成一个新的文件夹：node_modules

3、安装构建项目小程序开发工具（工具->构建npm）

构建后，会在项目根目录下生成一个新的文件夹：miniprogram_npm（构建时若出现NPM packages not found字样，请到 project.config.json 文件补充 packNpmManually 和 packNpmRelationList 配置项）

4、修改 app.json

将 app.json 中的 "style": "v2" 移除 不然会样式错乱

二、使用

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

在app.json中全局导入一次，就可以在任意页面中使用。也可是在页面单独使用即在页面所在目录的json文件中使用"usingComponents":{"您需要引用的组件名"："tdesign-miniprogram/(具体组件路径)"}

示例：这里在仅在app.json全局引入展示 局部同理tdesign-miniprogra前面千万不要加“/”会报错

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

2、在页面（wxml）中使用

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

 

可能的问题

1、导入后没有样式 （1）清除缓存重新编译（2）   开发工具右上角详情->本地设置->调试基础库切换基础库 （4）更新软软件

2.从官方的模版复制粘贴过来没有样式 可能有自定义组件检查一下

附链接:

TDesign UI：https://tdesign.tencent.com/miniprogram/getting-started

weui组件库：https://github.com/Tencent/weui