微信小程序在TS模板下引入TDesign组件

介绍

TDesign 是腾讯官方出品的一款微信小程序组件库。本文介绍如何在新建ts空白模板下引入TDesign库

步骤

  1. 新建一个空白项目,这里可以选择TS-基础模板
    新建项目目录结构如图所示:

    注意这里其实小程序的文件都存放在miniprogram文件夹下,因此我们后续安装npm包时需要进入miniprogram文件夹中
    如果直接在当前文件夹下安装npm包,后续构建npm包会报无法找到npm包的错误

NPM packages not found. Please confirm npm packages which need to build are belong to miniprogramRoot directory. Or you may edit project.config.json's packNpmManually and packNpmRelationList

此处的miniprogramRoot目录应该就是指miniprogram文件夹了

  1. 新建成功后我们在开发工具右下角选择终端,新建一个终端,输入cd miniprogram输入npm init指令

然后一直回车跳过,接着输入安装指令npm i tdesign-miniprogram -S --production,进度条快结束时会卡一会,过一会会安装成功

  1. 在微信开发者工具中对 npm 进行构建:左上角选择工具 - 构建 npm,此时直接构建成功,并不需要再修改project.config.json文件的配置
  2. 将 app.json 中的 "style": "v2" 移除。

使用

我们可以直接通过全局引入的方式,在app.json文件中引入想要的组件

javascript 复制代码
 "usingComponents": {
    "t-button": "tdesign-miniprogram/button/button"
  },

然后在页面中使用

html 复制代码
<view><t-button theme="primary">按钮</t-button></view>

按钮效果如下图所示

其他组件也是类似的引入方法

总结

在第一次引入TDesign组件库时,遇到最大的疑惑是不知该何时引入组件库----------新建一个小程序模板后进行引入,构建npm一直失败------------------应该在minprogram文件夹下安装npm包,其他的官方都有相关的教程,按照步骤即可。

相关推荐
paterWang3 小时前
小程序-基于java+SpringBoot+Vue的流浪动物救助小程序设计与实现
java·spring boot·小程序
wqq_9922502777 小时前
ssm面向品牌会员的在线商城小程序
数据库·小程序
h185385922447 小时前
志愿者小程序源码社区网格志愿者服务小程序php
微信小程序·小程序·php·uniapp·源码软件
流着口水看上帝9 小时前
微信小程序技术架构图
微信小程序·小程序
苹果电脑的鑫鑫10 小时前
微信小程序上传微信官方审核流程(1)
微信小程序·小程序
paterWang13 小时前
小程序-基于java+SpringBoot+Vue的农场管理系统设计与实现
java·spring boot·小程序
欧克生活13 小时前
漫步北京小程序+气象景观数字化服务平台,让气象景观触手可及
小程序
wqq_99225027713 小时前
springboot基于微信小程序的停车场管理系统
spring boot·后端·微信小程序
慕斯白狼13 小时前
微信小程序2-地图显示和地图标记
微信小程序·小程序·notepad++