当前位置：首页 > news >正文

HowToCookOnMiniprogram组件库使用指南：TDesign Miniprogram集成

news 2026/7/15 13:01:07

HowToCookOnMiniprogram组件库使用指南：TDesign Miniprogram集成

【免费下载链接】HowToCookOnMiniprogram程序员做菜指南 for Miniprogram，将程序员精神贯彻到底项目地址: https://gitcode.com/gh_mirrors/ho/HowToCookOnMiniprogram

HowToCookOnMiniprogram是一款专为程序员打造的做菜指南小程序，它巧妙地将程序员精神融入烹饪过程。本文将详细介绍如何在该项目中集成并使用TDesign Miniprogram组件库，让你的小程序界面更加美观、交互更加友好。

组件库集成准备

在开始使用TDesign Miniprogram组件库之前，确保你已经正确克隆了项目仓库。项目的仓库地址是 https://gitcode.com/gh_mirrors/ho/HowToCookOnMiniprogram。

项目结构概览

HowToCookOnMiniprogram的项目结构清晰，其中与组件库集成相关的关键目录如下：

miniprogram/：小程序主目录
- app.json：小程序全局配置文件
- pages/：小程序页面目录
- components/：自定义组件目录

TDesign Miniprogram组件库的全局配置

TDesign Miniprogram组件库的集成首先需要在全局配置文件中进行设置，这样组件就可以在整个项目中使用了。

全局引入组件

在miniprogram/app.json文件中，通过usingComponents字段全局引入TDesign组件。以下是一些常用组件的引入方式：

"usingComponents": { "t-button": "tdesign-miniprogram/button/button", "t-cell": "tdesign-miniprogram/cell/cell", "t-dialog": "tdesign-miniprogram/dialog/dialog", "t-icon": "tdesign-miniprogram/icon/icon", "t-input": "tdesign-miniprogram/input/input", "t-toast": "tdesign-miniprogram/toast/toast" }

这样配置后，在项目的任何页面中都可以直接使用这些组件，无需再次引入。

常用TDesign组件使用示例

TDesign Miniprogram提供了丰富的组件，下面介绍几个在HowToCookOnMiniprogram中常用的组件及其使用方法。

按钮组件（t-button）

按钮是小程序中最常用的交互元素之一，TDesign的t-button组件提供了多种样式和功能。

在miniprogram/pages/index/index.wxml中，你可以看到这样的使用示例：

<t-button bind:tap="handleToStore">仓储管理</t-button>

这个按钮点击后会触发handleToStore函数，跳转到仓储管理页面。

图标组件（t-icon）

图标可以让界面更加生动直观，TDesign的t-icon组件提供了丰富的图标库。

在miniprogram/pages/index/index.wxml中，搜索框内的搜索图标就是使用t-icon实现的：

<t-icon name="search" size="44rpx" color="#666" />

你可以通过name属性指定不同的图标，通过size和color属性调整图标的大小和颜色。

标签组件（t-tag）

标签组件可以用于对内容进行分类或标记，在搜索结果页面中得到了广泛应用。

在miniprogram/pages/search/index.wxml中：

<t-tag slot="note" theme="{{themeMap[item.category] || 'primary'}}" variant="light">{{chineseMap[item.category]}}</t-tag>

这个标签根据菜谱的类别显示不同的主题颜色，让用户可以快速识别菜谱类型。

步骤条组件（t-steps）

在菜谱详情页面，步骤条组件用于展示烹饪步骤，非常直观。

在miniprogram/pages/detail/index.wxml中：

<t-steps wx:if="{{detail.type == 'list'}}" readonly current="{{stepIndexes[sectionIndex]}}" layout="vertical"> <t-step wx:for="{{detail.items}}" wx:key="index" wx:for-item="step"> <!-- 步骤内容 --> </t-step> </t-steps>

这个垂直布局的步骤条清晰地展示了每个烹饪步骤，当前步骤会高亮显示。

页面级组件引入

除了全局引入组件外，有时我们也需要在特定页面引入一些不常用的组件。这时可以在页面的json配置文件中进行引入。

例如，在miniprogram/pages/stock-edit/index.json中，为库存编辑页面引入了日历组件：

"usingComponents": { "standard-info": "../../components/standard-info", "t-calendar": "tdesign-miniprogram/calendar/calendar" }

然后在miniprogram/pages/stock-edit/index.wxml中就可以使用这个日历组件了：

<t-calendar visible="{{visible}}" type="date" max="{{maxDate}}" min="{{minDate}}" bind:confirm="handleConfirm" bind:close="handleClose" />

这个日历组件用于选择食材的保质期，非常实用。

自定义组件与TDesign的结合

HowToCookOnMiniprogram还提供了一些自定义组件，这些组件也可以与TDesign组件结合使用，创造出更加丰富的功能。

例如，在miniprogram/components/standard-info/index.wxml中，自定义的标准信息组件就结合了TDesign的加载组件、图片组件和空状态组件：

<t-loading theme="circular" size="40rpx" text="查询条码信息..." /> <t-image wx:else width="120" mode="widthFix" src="{{info.pic}}" bind:error="onImageError" /> <t-empty icon="info-circle-filled" description="暂无标准信息"> <!-- 空状态下的内容 --> </t-empty>

这种结合使用的方式，既保证了界面风格的统一，又实现了特定的业务功能。