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

相关推荐
27669582921 小时前
美团民宿 mtgsig 小程序 mtgsig1.2 分析
java·python·小程序·美团·mtgsig·mtgsig1.2·美团民宿
web_Hsir2 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir2 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa3 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
Angus-zoe3 小时前
微信小程序唤起app
微信小程序·小程序
不老刘4 小时前
微信小程序使用 Vant Weapp 组件库教程
微信小程序·小程序·vant
橘猫云计算机设计5 小时前
基于springboot微信小程序的旅游攻略系统(源码+lw+部署文档+讲解),源码可白嫖!
java·spring boot·后端·微信小程序·毕业设计·旅游
Mr.Liu65 小时前
小程序30-wxml语法-声明和绑定数据
前端·微信小程序·小程序
清风絮柳15 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
说私域16 小时前
基于开源AI大模型与S2B2C模式的线下服务型门店增长策略研究——以AI智能名片与小程序源码技术为核心
大数据·人工智能·小程序·开源