「作者主页」：雪碧有白泡泡
「个人网站」：雪碧的个人网站
「推荐专栏」：
★java一站式服务 ★
★前端炫酷代码分享
★ ★ uniapp-从构建到提升★
★ 从0到英雄，vue成神之路★
★ 解决算法，一个专栏就够了★
★ 架构咱们从0说★
★ 数据流通的精妙之道★
文章目录
TDesign UI是一个小程序组件库，它提供了一系列常用的UI组件和样式，帮助开发者快速构建美观、易用的小程序界面。
TDesign UI的特点之一是它具有丰富多样的组件库，涵盖了各种常用的UI元素，包括按钮、表单、卡片、导航栏、标签、列表等等。这些组件都经过精心设计，具有统一的风格和交互方式，使得小程序界面的开发变得更加简单和高效。
另外，TDesign UI还提供了丰富的样式和主题定制选项，开发者可以根据自己的需求进行调整和扩展。这使得开发者能够根据具体的小程序品牌或设计要求，轻松创建符合自己风格的界面。
除了组件和样式，TDesign UI还注重性能和用户体验。它经过优化和测试，确保在不同平台和设备上都能提供流畅的运行和良好的响应性能。同时，它也提供了详细的文档和示例代码，帮助开发者快速上手并解决问题。
使用方法
在.json页面中插入
{ "component": true, "usingComponents": { "t-button": "文件所在位置" }}即可在.wxml中使用该组件库
基础
导航
输入
数据展示
反馈
获取与在线预览
扫描下方二维码即可，点击压缩包
首页
首页功能设定
- loading入场
- 下拉刷新
- 搜索栏
- 分类切换
- 商品列表
- 规格弹层
- 加载更多
home.wxml
运行该代码后，大致的UI结构如下所示：
---------------------------------------| pageLoading |---------------------------------------| home-page-header部分 |---------------------------------------| swiper-wrap部分 |---------------------------------------| home-page-container部分 ||-------------------------------------|| home-page-tabs ||-------------------------------------|| goods-list部分 ||-------------------------------------|| load-more部分 ||-------------------------------------|| t-toast |---------------------------------------以下是对每个部分的解析：
pageLoading部分：该部分根据条件进行渲染，如果pageLoading变量为true，则显示一个居中的加载指示器（t-loading）。
home-page-header部分：该部分代表首页的头部区域。它包含一个搜索栏（t-search），具有一个占位文本（“iphone
16 火热发售中”）和禁用状态。搜索栏的左侧图标（t-icon）使用了前缀为"wr"的"search"图标。
swiper-wrap部分：该部分包含一个轮播组件（t-swiper），用于展示一系列的图片幻灯片。图片通过imgSrcs数组提供，轮播支持自动播放、导航按钮以及点击图片触发navToActivityDetail事件。
home-page-container部分：该部分代表首页的主要内容容器。它包含一个选项卡组件（t-tabs），内部包含多个选项卡面板（t-tab-panel）。选项卡面板的数量由tabList数组决定。每个选项卡面板都有一个基于tabList数组中的元素的标签和值。当选择一个选项卡时，会调用tabChangeHandle函数。
goods-list部分：该部分使用自定义组件goods-list显示一系列商品列表。它接收goodsList数组作为输入数据，并提供事件处理函数（goodListClickHandle、goodListAddCartHandle）以处理商品点击和添加到购物车的操作。
load-more部分：该部分处理分页或惰性加载的功能。它包含了load-more组件，根据goodsListLoadStatus变量显示不同的状态（加载中、错误、空列表）。当用户重试加载更多数据时，会调用onReTry函数。
t-toast部分：该部分代表一个提示框组件（t-toast），用于向用户显示通知或消息。
在该项目中是如何使用 TDesign UI 的
代码
{ "navigationBarTitleText": "首页", "onReachBottomDistance": 10, "backgroundTextStyle": "light", "enablePullDownRefresh": true, "usingComponents": { "t-search": "tdesign-miniprogram/search/search", "t-loading": "tdesign-miniprogram/loading/loading", "t-swiper": "tdesign-miniprogram/swiper/swiper", "t-swiper-nav": "tdesign-miniprogram/swiper-nav/swiper-nav", "t-image": "/components/webp-image/index", "t-icon": "tdesign-miniprogram/icon/icon", "t-toast": "tdesign-miniprogram/toast/toast", "t-tabs": "tdesign-miniprogram/tabs/tabs", "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel", "goods-list": "/components/goods-list/index", "load-more": "/components/load-more/index" }}这段代码是一个小程序页面的配置文件，用于定义页面的一些属性和引用组件。
- navigationBarTitleText：设置导航栏为"首页"。
- onReachBottomDistance：定义触发上拉加载更多的距离为10px。
- backgroundTextStyle：设置背景文本样式为"light"，可能是指背景文字颜色或样式的设置。
- enablePullDownRefresh：启用下拉刷新功能，允许用户下拉页面进行刷新操作。
使用 TDesign UI 组件库时，通过 “usingComponents” 字段引入所需的组件。每个组件都有一个别名和路径。
例如：
- “t-search”: “tdesign-miniprogram/search/search” 表示引入了名为 “t-search” 的搜索组件，路径为 “tdesign-miniprogram/search/search”。
- “goods-list”: “/components/goods-list/index” 表示引入了名为 “goods-list” 的商品列表组件，路径为 “/components/goods-list/index”。
你可以在页面的 WXML 文件中直接使用这些组件，比如：
以下是使用微信小程序框架构建页面的一般步骤：
-
创建项目：首先，在微信开发者工具中创建一个新的小程序项目。
-
页面结构：小程序采用组件化的思路构建页面。每个页面由一个
.wxml文件、一个.wxss文件、一个.js文件和一个.json文件组成。.wxml文件定义页面的结构，.wxss文件定义页面的样式，.js文件处理页面的逻辑，.json文件配置页面的一些参数。 -
页面布局：在
.wxml文件中使用小程序提供的组件来构建页面的布局。例如，使用 -
导入组件库：在
.json文件中导入TDesign UI使得.wxml文件正常使用 -
样式设置：在
.wxss文件中编写样式规则来美化页面的外观。你可以使用 CSS 属性来调整元素的大小、颜色、边距等样式属性。 -
交互逻辑：在
.js文件中编写页面的交互逻辑。通过监听事件、调用 API 等方式实现页面的动态效果和交互行为。例如，响应按钮点击事件、发送网络请求、更新数据等操作。 -
数据传递和状态管理：小程序中可以使用
setData()方法来更新页面数据，并通过数据绑定的方式将数据渲染到视图上。对于复杂的状态管理，可以考虑使用框架提供的数据管理方案或者第三方的状态管理库。 -
调试和优化：在开发过程中，使用微信开发者工具提供的调试功能进行页面的测试和调试。根据用户反馈和性能指标进行页面的优化，包括减少网络请求、优化渲染性能、提高用户体验等。
来源地址：https://blog.csdn.net/Why_does_it_work/article/details/131995996
