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

- 日理万妓 2023-10-14 09:31 13阅读 0赞

# 前言 #

![在这里插入图片描述][0422b4369a3549b3a39da19588ab88f4.png]  
「作者主页」：[雪碧有白泡泡][Link 1]  
「个人网站」：[雪碧的个人网站][Link 2]  
「推荐专栏」：

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

![请添加图片描述][c7f3e6b8a7624a9eabbea77dbcbca119.jpeg]

### 文章目录 ###

*  前言
 *  TDesign UI 介绍
 *  组件库
 *   *   *  使用方法
         *  基础
         *  导航
         *  输入
         *  数据展示
         *  反馈
     *  获取与在线预览
 *  实战电商
 *   *   *  首页
         *  home.wxml
         *   *   *  运行该代码后，大致的UI结构如下所示：
                 *  在该项目中是如何使用 TDesign UI 的
 *  小结之使用TDesign UI 构建自己的页面

# TDesign UI 介绍 #

![在这里插入图片描述][84b87029c76947a1b40e5a5febe31200.png]

> TDesign UI是一个小程序组件库，它提供了一系列常用的UI组件和样式，帮助开发者快速构建美观、易用的小程序界面。
> 
> TDesign UI的特点之一是它具有丰富多样的组件库，涵盖了各种常用的UI元素，包括按钮、表单、卡片、导航栏、标签、列表等等。这些组件都经过精心设计，具有统一的风格和交互方式，使得小程序界面的开发变得更加简单和高效。
> 
> 另外，TDesign UI还提供了丰富的样式和主题定制选项，开发者可以根据自己的需求进行调整和扩展。这使得开发者能够根据具体的小程序品牌或设计要求，轻松创建符合自己风格的界面。
> 
> 除了组件和样式，TDesign UI还注重性能和用户体验。它经过优化和测试，确保在不同平台和设备上都能提供流畅的运行和良好的响应性能。同时，它也提供了详细的文档和示例代码，帮助开发者快速上手并解决问题。

# 组件库 #

![在这里插入图片描述][acf856622b0f4505a1749a8e138324d1.png]

### 使用方法 ###

![在这里插入图片描述][0e0b583b519a49d08eb990dd78e81459.png]

**在.json页面中插入**

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

即可在.wxml中使用该组件库  
![请添加图片描述][725ca5e76f884c45a738d858b2abfe6e.gif]

### 基础 ###

![在这里插入图片描述][b842bc629255427e8db8a96679aac9ae.png]

### 导航 ###

![在这里插入图片描述][b50c2bdbd56d4a4eb58dd550600b0014.png]

### 输入 ###

![在这里插入图片描述][5fd51d5688234927b38cdca2d80a5e42.png]  
![在这里插入图片描述][ecb2cdb4d88c4cefbe175bbef3792413.png]

### 数据展示 ###

![在这里插入图片描述][f1bc951fc89a4715bc21629ab34840ab.png]

![在这里插入图片描述][4ef70a61704d4beea6e83a53b9708f17.png]

### 反馈 ###

![在这里插入图片描述][58a1742f711347df9c16a6b508e68f57.png]  
![在这里插入图片描述][673bc43405d84aef92d879093bf0ab3f.png]

## 获取与在线预览 ##

扫描下方二维码即可，点击[压缩包][Link 6]  
![在这里插入图片描述][075a503b830f405ba078ae284e9fa387.png]

# 实战电商 #

### 首页 ###

> 首页功能设定
> 
> 1.  loading入场
> 2.  下拉刷新
> 3.  搜索栏
> 4.  分类切换
> 5.  商品列表
> 6.  规格弹层
> 7.  加载更多  
>     ![在这里插入图片描述][c04c59855a104f258c1cfa78299728b9.png]

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

<t-search></t-search>
    <t-loading></t-loading>
    <t-swiper></t-swiper>
    ...

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

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

1.  创建项目：首先，在微信开发者工具中创建一个新的小程序项目。
2.  页面结构：小程序采用组件化的思路构建页面。每个页面由一个 `.wxml` 文件、一个 `.wxss` 文件、一个 `.js` 文件和一个 `.json` 文件组成。`.wxml` 文件定义页面的结构，`.wxss` 文件定义页面的样式，`.js` 文件处理页面的逻辑，`.json` 文件配置页面的一些参数。
3.  页面布局：在 `.wxml` 文件中使用小程序提供的组件来构建页面的布局。例如，使用 `<view>` 组件作为容器，使用 `<text>` 组件显示文本内容，使用 `<image>` 组件显示图片等等。根据设计需求和功能要求，选择**TDesign UI** 进行布局。
4.  导入组件库：在 `.json` 文件中导入TDesign UI使得 `.wxml` 文件正常使用
5.  样式设置：在 `.wxss` 文件中编写样式规则来美化页面的外观。你可以使用 CSS 属性来调整元素的大小、颜色、边距等样式属性。
6.  交互逻辑：在 `.js` 文件中编写页面的交互逻辑。通过监听事件、调用 API 等方式实现页面的动态效果和交互行为。例如，响应按钮点击事件、发送网络请求、更新数据等操作。
7.  数据传递和状态管理：小程序中可以使用 `setData()` 方法来更新页面数据，并通过数据绑定的方式将数据渲染到视图上。对于复杂的状态管理，可以考虑使用框架提供的数据管理方案或者第三方的状态管理库。
8.  调试和优化：在开发过程中，使用微信开发者工具提供的调试功能进行页面的测试和调试。根据用户反馈和性能指标进行页面的优化，包括减少网络请求、优化渲染性能、提高用户体验等。

[0422b4369a3549b3a39da19588ab88f4.png]: https://img-blog.csdnimg.cn/0422b4369a3549b3a39da19588ab88f4.png
[Link 1]: https://blog.csdn.net/Why_does_it_work?spm=1011.2415.3001.5343
[Link 2]: https://sprite.inscode.cc/
[java]: https://blog.csdn.net/why_does_it_work/category_12379581.html
[Link 3]: https://blog.csdn.net/why_does_it_work/category_12378617.html
[uniapp-]: https://blog.csdn.net/why_does_it_work/category_12363697.html
[0_vue]: https://blog.csdn.net/why_does_it_work/category_12376654.html
[Link 4]: https://blog.csdn.net/why_does_it_work/category_12381051.html
[0]: https://blog.csdn.net/why_does_it_work/category_12381055.html
[Link 5]: https://blog.csdn.net/why_does_it_work/category_12381058.html
[c7f3e6b8a7624a9eabbea77dbcbca119.jpeg]: https://img-blog.csdnimg.cn/c7f3e6b8a7624a9eabbea77dbcbca119.jpeg
[84b87029c76947a1b40e5a5febe31200.png]: https://img-blog.csdnimg.cn/84b87029c76947a1b40e5a5febe31200.png
[acf856622b0f4505a1749a8e138324d1.png]: https://img-blog.csdnimg.cn/acf856622b0f4505a1749a8e138324d1.png
[0e0b583b519a49d08eb990dd78e81459.png]: https://img-blog.csdnimg.cn/0e0b583b519a49d08eb990dd78e81459.png
[725ca5e76f884c45a738d858b2abfe6e.gif]: https://img-blog.csdnimg.cn/725ca5e76f884c45a738d858b2abfe6e.gif
[b842bc629255427e8db8a96679aac9ae.png]: https://img-blog.csdnimg.cn/b842bc629255427e8db8a96679aac9ae.png
[b50c2bdbd56d4a4eb58dd550600b0014.png]: https://img-blog.csdnimg.cn/b50c2bdbd56d4a4eb58dd550600b0014.png
[5fd51d5688234927b38cdca2d80a5e42.png]: https://img-blog.csdnimg.cn/5fd51d5688234927b38cdca2d80a5e42.png
[ecb2cdb4d88c4cefbe175bbef3792413.png]: https://img-blog.csdnimg.cn/ecb2cdb4d88c4cefbe175bbef3792413.png
[f1bc951fc89a4715bc21629ab34840ab.png]: https://img-blog.csdnimg.cn/f1bc951fc89a4715bc21629ab34840ab.png
[4ef70a61704d4beea6e83a53b9708f17.png]: https://img-blog.csdnimg.cn/4ef70a61704d4beea6e83a53b9708f17.png
[58a1742f711347df9c16a6b508e68f57.png]: https://img-blog.csdnimg.cn/58a1742f711347df9c16a6b508e68f57.png
[673bc43405d84aef92d879093bf0ab3f.png]: https://img-blog.csdnimg.cn/673bc43405d84aef92d879093bf0ab3f.png
[Link 6]: https://download.csdn.net/download/Why_does_it_work/88123364?spm=1001.2014.3001.5501
[075a503b830f405ba078ae284e9fa387.png]: https://img-blog.csdnimg.cn/075a503b830f405ba078ae284e9fa387.png
[c04c59855a104f258c1cfa78299728b9.png]: https://img-blog.csdnimg.cn/c04c59855a104f258c1cfa78299728b9.png