面试官说，布局小程序页面记得用TDesign组件库

前言

「作者主页」：雪碧有白泡泡
「个人网站」：雪碧的个人网站
「推荐专栏」：

★java一站式服务 ★
★前端炫酷代码分享
★ ★ uniapp-从构建到提升★
★ 从0到英雄，vue成神之路★
★ 解决算法，一个专栏就够了★
★ 架构咱们从0说★
★ 数据流通的精妙之道★

TDesign UI 介绍

TDesign UI是一个小程序组件库，它提供了一系列常用的UI组件和样式，帮助开发者快速构建美观、易用的小程序界面。

TDesign UI的特点之一是它具有丰富多样的组件库，涵盖了各种常用的UI元素，包括按钮、表单、卡片、导航栏、标签、列表等等。这些组件都经过精心设计，具有统一的风格和交互方式，使得小程序界面的开发变得更加简单和高效。

另外，TDesign UI还提供了丰富的样式和主题定制选项，开发者可以根据自己的需求进行调整和扩展。这使得开发者能够根据具体的小程序品牌或设计要求，轻松创建符合自己风格的界面。

除了组件和样式，TDesign UI还注重性能和用户体验。它经过优化和测试，确保在不同平台和设备上都能提供流畅的运行和良好的响应性能。同时，它也提供了详细的文档和示例代码，帮助开发者快速上手并解决问题。

组件库

使用方法

在.json页面中插入

{
  "component": true,
  "usingComponents": {
    "t-button": "文件所在位置"
  }
}

即可在.wxml中使用该组件库

基础

导航

输入

数据展示

反馈

获取与在线预览

扫描下方二维码即可，点击压缩包

实战电商

首页

首页功能设定

1. loading入场
2. 下拉刷新
3. 搜索栏
4. 分类切换
5. 商品列表
6. 规格弹层
7. 加载更多
   

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               |
---------------------------------------

以下是对每个部分的解析：

1. pageLoading部分：该部分根据条件进行渲染，如果pageLoading变量为true，则显示一个居中的加载指示器（t-loading）。

2. home-page-header部分：该部分代表首页的头部区域。它包含一个搜索栏（t-search），具有一个占位文本（“iphone
   16 火热发售中”）和禁用状态。搜索栏的左侧图标（t-icon）使用了前缀为"wr"的"search"图标。

3. swiper-wrap部分：该部分包含一个轮播组件（t-swiper），用于展示一系列的图片幻灯片。图片通过imgSrcs数组提供，轮播支持自动播放、导航按钮以及点击图片触发navToActivityDetail事件。

4. home-page-container部分：该部分代表首页的主要内容容器。它包含一个选项卡组件（t-tabs），内部包含多个选项卡面板（t-tab-panel）。选项卡面板的数量由tabList数组决定。每个选项卡面板都有一个基于tabList数组中的元素的标签和值。当选择一个选项卡时，会调用tabChangeHandle函数。

5. goods-list部分：该部分使用自定义组件goods-list显示一系列商品列表。它接收goodsList数组作为输入数据，并提供事件处理函数（goodListClickHandle、goodListAddCartHandle）以处理商品点击和添加到购物车的操作。

6. load-more部分：该部分处理分页或惰性加载的功能。它包含了load-more组件，根据goodsListLoadStatus变量显示不同的状态（加载中、错误、空列表）。当用户重试加载更多数据时，会调用onReTry函数。

7. 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 文件中直接使用这些组件，比如：

...

小结之使用TDesign UI 构建自己的页面

以下是使用微信小程序框架构建页面的一般步骤：

1. 创建项目：首先，在微信开发者工具中创建一个新的小程序项目。

2. 页面结构：小程序采用组件化的思路构建页面。每个页面由一个 .wxml 文件、一个 .wxss 文件、一个 .js 文件和一个 .json 文件组成。.wxml 文件定义页面的结构，.wxss 文件定义页面的样式，.js 文件处理页面的逻辑，.json 文件配置页面的一些参数。

3. 页面布局：在 .wxml 文件中使用小程序提供的组件来构建页面的布局。例如，使用 组件作为容器，使用 组件显示文本内容，使用 组件显示图片等等。根据设计需求和功能要求，选择TDesign UI 进行布局。

4. 导入组件库：在 .json 文件中导入TDesign UI使得 .wxml 文件正常使用

5. 样式设置：在 .wxss 文件中编写样式规则来美化页面的外观。你可以使用 CSS 属性来调整元素的大小、颜色、边距等样式属性。

6. 交互逻辑：在 .js 文件中编写页面的交互逻辑。通过监听事件、调用 API 等方式实现页面的动态效果和交互行为。例如，响应按钮点击事件、发送网络请求、更新数据等操作。

7. 数据传递和状态管理：小程序中可以使用 setData() 方法来更新页面数据，并通过数据绑定的方式将数据渲染到视图上。对于复杂的状态管理，可以考虑使用框架提供的数据管理方案或者第三方的状态管理库。

8. 调试和优化：在开发过程中，使用微信开发者工具提供的调试功能进行页面的测试和调试。根据用户反馈和性能指标进行页面的优化，包括减少网络请求、优化渲染性能、提高用户体验等。