微信小程序在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包,其他的官方都有相关的教程,按照步骤即可。

相关推荐
racerun3 小时前
小程序导航设置更多内容的实现方法
小程序
说私域3 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6683 小时前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳4 小时前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww1216 小时前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero8 小时前
微信小程序41~50
微信小程序·小程序
走,带你去玩16 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
是一碗螺丝粉16 小时前
🔥 微信H5视频自动播放终极秘籍:WeixinJSBridge竟是官方“通行证”?
微信小程序
一笑code17 小时前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react