TDesign UI 介绍
TDesign UI是一个小程序组件库，它提供了一系列常用的UI组件和样式，帮助开发者快速构建美观、易用的小程序界面。
TDesign UI的特点之一是它具有丰富多样的组件库，涵盖了各种常用的UI元素，包括按钮、表单、卡片、导航栏、标签、列表等等。这些组件都经过精心设计，具有统一的风格和交互方式，使得小程序界面的开发变得更加简单和高效。
另外，TDesign UI还提供了丰富的样式和主题定制选项，开发者可以根据自己的需求进行调整和扩展。这使得开发者能够根据具体的小程序品牌或设计要求，轻松创建符合自己风格的界面。
除了组件和样式，TDesign UI还注重性能和用户体验。它经过优化和测试，确保在不同平台和设备上都能提供流畅的运行和良好的响应性能。同时，它也提供了详细的文档和示例代码，帮助开发者快速上手并解决问题。
组件库
使用方法
在.json页面中插入
{ "component": true, "usingComponents": { "t-button": "文件所在位置" } }
即可在.wxml中使用该组件库
基础
导航
输入
数据展示
反馈
获取与在线预览
扫描下方二维码即可，点击压缩包
实战电商
首页
首页功能设定
- loading入场
- 下拉刷新
- 搜索栏
- 分类切换
- 商品列表
- 规格弹层
- 加载更多
home.wxml
<view style="text-align: center; color: #b9b9b9" wx:if="{{pageLoading}}"> <t-loading theme="circular" size="40rpx" text="加载中..." inherit-color /> </view> <view class="home-page-header"> <view class="search" bind:tap="navToSearchPage"> <t-search t-class-input="t-search__input" t-class-input-container="t-search__input-container" placeholder="iphone 16 火热发售中" leftIcon="" disabled > <t-icon slot="left-icon" prefix="wr" name="search" size="40rpx" color="#bbb" /> </t-search> </view> <view class="swiper-wrap"> <t-swiper wx:if="{{imgSrcs.length > 0}}" current="{{current}}" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}" navigation="{{navigation}}" imageProps="{{swiperImageProps}}" list="{{imgSrcs}}" bind:click="navToActivityDetail" /> </view> </view> <view class="home-page-container"> <view class="home-page-tabs"> <t-tabs t-class="t-tabs" t-class-active="tabs-external__active" t-class-item="tabs-external__item" defaultValue="{{0}}" space-evenly="{{false}}" bind:change="tabChangeHandle" > <t-tab-panel wx:for="{{tabList}}" wx:for-index="index" wx:key="index" label="{{item.text}}" value="{{item.key}}" /> </t-tabs> </view> <goods-list wr-class="goods-list-container" goodsList="{{goodsList}}" bind:click="goodListClickHandle" bind:addcart="goodListAddCartHandle" /> <load-more list-is-empty="{{!goodsList.length}}" status="{{goodsListLoadStatus}}" bind:retry="onReTry" /> <t-toast id="t-toast" /> </view>
运行该代码后，大致的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 文件中直接使用这些组件，比如：
<t-search></t-search> <t-loading></t-loading> <t-swiper></t-swiper> ...
小结之使用TDesign UI 构建自己的页面
以下是使用微信小程序框架构建页面的一般步骤：
创建项目：首先，在微信开发者工具中创建一个新的小程序项目。
页面结构：小程序采用组件化的思路构建页面。每个页面由一个 .wxml 文件、一个 .wxss 文件、一个 .js 文件和一个 .json 文件组成。.wxml 文件定义页面的结构，.wxss 文件定义页面的样式，.js 文件处理页面的逻辑，.json 文件配置页面的一些参数。
页面布局：在 .wxml 文件中使用小程序提供的组件来构建页面的布局。例如，使用 <view> 组件作为容器，使用 <text> 组件显示文本内容，使用 <image> 组件显示图片等等。根据设计需求和功能要求，选择TDesign UI 进行布局。
导入组件库：在 .json 文件中导入TDesign UI使得 .wxml 文件正常使用
样式设置：在 .wxss 文件中编写样式规则来美化页面的外观。你可以使用 CSS 属性来调整元素的大小、颜色、边距等样式属性。
交互逻辑：在 .js 文件中编写页面的交互逻辑。通过监听事件、调用 API 等方式实现页面的动态效果和交互行为。例如，响应按钮点击事件、发送网络请求、更新数据等操作。
数据传递和状态管理：小程序中可以使用 setData() 方法来更新页面数据，并通过数据绑定的方式将数据渲染到视图上。对于复杂的状态管理，可以考虑使用框架提供的数据管理方案或者第三方的状态管理库。
调试和优化：在开发过程中，使用微信开发者工具提供的调试功能进行页面的测试和调试。根据用户反馈和性能指标进行页面的优化，包括减少网络请求、优化渲染性能、提高用户体验等。
