前言
「作者主页」：雪碧有白泡泡
「个人网站」：雪碧的个人网站
「推荐专栏」：
★java一站式服务 ★
★前端炫酷代码分享
★ ★ uniapp-从构建到提升★
★ 从0到英雄，vue成神之路★
★ 解决算法，一个专栏就够了★
★ 架构咱们从0说★
★ 数据流通的精妙之道★
文章目录
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()方法来更新页面数据，并通过数据绑定的方式将数据渲染到视图上。对于复杂的状态管理，可以考虑使用框架提供的数据管理方案或者第三方的状态管理库。 -
调试和优化：在开发过程中，使用微信开发者工具提供的调试功能进行页面的测试和调试。根据用户反馈和性能指标进行页面的优化，包括减少网络请求、优化渲染性能、提高用户体验等。