526互联

微信小程序使用TDesign

发布时间 2023-06-01 19:31:11作者: 青明尘下

TDesign

1.新建一个普通的微信小程序项目

2.在 project.config.json 配置sass插件（非强制，此步可根据自己需要而配置）

image-20230601181159405 
"useCompilerPlugins": [
  "sass"
],

3.使用 npm 安装 tdesign，并构建 npm

npm i tdesign-miniprogram -S --production

?成功标志

然后，工具 → 构建npm

4.修改 app.json

将 app.json 中的 "style": "v2" 移除。

5.测试组件

在官网上，随便找一个组件试试

在 app.json 中引入组件（全局引入）

image-20230601191341800 
"usingComponents": {
	"t-button": "tdesign-miniprogram/button/button"
}

使用组件

wxml

<view class="button-example">
  <t-button theme="primary" ghost size="large">幽灵按钮</t-button>
  <t-button theme="danger" ghost size="large">幽灵按钮</t-button>
  <t-button ghost size="large">幽灵按钮</t-button>
</view>

scss

.button-example {
  display: flex;
  justify-content: space-between;
  background-color: #181818;
  padding: 32rpx;
}

效果图：

image-20230601191550400