用js模版新建小程序并调用tdesign组件库
本文记录用tdesign组件库开发微信小程序 ，版本管理jihulab
一、创建项目
1.在jihulab上创建项目，tdesignhelloword
2.电脑中新建项目文件夹，tdesignhelloword，在cmd中进入这个路径：cd /d 文件夹路径
3.克隆jihulab上的项目：git clone https://jihulab.com/...../tdesignhelloworld.git
4.在项目文件夹内，用以下代码新建《.gitignore》文件
# Windows
[Dd]esktop.ini
Thumbs.db
$RECYCLE.BIN/
# macOS
.DS_Store
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
# Node.js
node_modules/
5.在开发者工具中新建javascript模版的项目，项目路径随便。这个项目文件结构清晰，相对干净，需要看tdesign示例的，另外建tdesign两个模版的项目就好
6.把第5步新建项目里的文件复制到从jihulab上克隆下来的项目所在文件夹中
7.cmd转入tdesignhelloword文件夹，git命令提交所有文件
二、调用tdesign组件
1.cmd转入项目所在文件夹
2.安装tdesign：npm i tdesign-miniprogram -S --production
3.微信开发者工具，打开项目，菜单：工具 / 构建 npm
刚构建完时，会有3个错，甚至报"pages/index/index"未注册，此时执行第4步即可
4.将 app.json 中的 "style": "v2" 移除，此时，项目可以重新正常运行
三、测试tdesign的button组件
1.在pages下新建button文件夹，在这个文件夹下新建Page，输入index，会自动生成4个文件
2.修改pages\button\index.json，引入组件
{
"usingComponents": {
"t-button": "tdesign-miniprogram/button/button"
}
}
3修改pages\button\index.wxml，调用组件
<view class="button-example">
<t-button theme="primary" size="large" bindtap="onTabToIndex">转去首页</t-button>
<t-button theme="light" size="large" bindtap="onTabToLog">查看日志</t-button>
<t-button size="large">填充按钮</t-button>
</view>
<view class="button-example">
<t-button theme="primary" size="large" variant="outline">描边按钮</t-button>
<t-button theme="primary" size="large" variant="text">文字按钮</t-button>
</view>
4.修改pages\button\index.js，加入事件
Page({
onTabToIndex() {
wx.navigateTo({
url: '../index/index'
})
},
onTabToLog() {
wx.navigateTo({
url: '../logs/logs'
})
},
})
5.修改pages\button\index.wxss，加入样式
.button-example {
margin: 0 32rpx;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32rpx;
}
.button-example:not(:last-child) {
margin-bottom: 32rpx;
}
预览可见测试成功。
