微信小程序的ts模版项目中引入tdesign组件库
1.新建ts模版的项目,这时项目详情 / 本地设置中,调试基础库默认值是:2.30.4,默认也不会勾选“将js编译成es5”,此时小程序的根目录在miniprogram文件夹
2.cmd转入新项目的miniprogram文件夹,执行命令安装tdesign:
npm init -y
npm i tdesign-miniprogram -S --production
如果直接在项目根目录下安装tdesign,会报错:NPM packages not found. Please confirm npm packages which need to build are belong to `miniprogramRoot` directory
3.进入微信开发者工具,执行菜单:工具 / 构建npm
4.测试tdesign组件
①加入组件引用,修改miniprogram\pages\logs\logs.json
"usingComponents": {
"t-button": "tdesign-miniprogram/button/button"
}
②调用组件,修改miniprogram\pages\logs\logs.wxml
<view>
<t-button theme="primary" size="large" bindtap="onTabToIndex">转去首页</t-button>
</view>
③加入组件触发事件,修改miniprogram\pages\logs\logs.ts
onTabToIndex () {
wx.navigateTo({
url: '../index/index'
})
}