The interviewer said, remember to use the TDesign component library to layout the applet page

foreword

"Author's Homepage" : Sprite Youbai Bubbles
"Personal Website" : Sprite's personal website
"Recommendation Column" :

★ Java one-stop service ★
★ Front-end cool code sharing
★ ★ uniapp-from construction to promotion ★
★ From 0 to hero, Vue's road to god ★
★ Solving algorithm, one column is enough ★
★ Let's talk about architecture from 0 ★
★ The subtle way of data circulation ★

Introduction to TDesign UI

TDesign UI is a small program component library, which provides a series of commonly used UI components and styles to help developers quickly build beautiful and easy-to-use small program interfaces.

One of the characteristics of TDesign UI is that it has a rich and diverse component library, covering a variety of commonly used UI elements, including buttons, forms, cards, navigation bars, labels, lists, and more. These components have been carefully designed with a unified style and interaction method, making the development of the applet interface easier and more efficient.

In addition, TDesign UI also provides a wealth of style and theme customization options, developers can adjust and expand according to their own needs. This enables developers to easily create interfaces that meet their own style according to specific Mini Program brand or design requirements.

In addition to components and styles, TDesign UI also focuses on performance and user experience. It has been optimized and tested to ensure smooth running and responsive performance across different platforms and devices. At the same time, it also provides detailed documentation and sample codes to help developers quickly get started and solve problems.

component library

Instructions

Insert in .json page

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

You can use the component library in .wxml

Base

navigation

enter

Data Display

the feedback

Get and Online Preview

Just scan the QR code below and click on the compressed package

Actual e-commerce

front page

Homepage function settings

1. admission
2. Pull down to refresh
3. search bar
4. Category switching
5. product list
6. Specification layer
7. load more
   

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>

After running the code, the approximate UI structure is as follows:

---------------------------------------
|              pageLoading            |
---------------------------------------
|         home-page-header部分         |
---------------------------------------
|           swiper-wrap部分           |
---------------------------------------
|       home-page-container部分        |
|-------------------------------------|
|            home-page-tabs            |
|-------------------------------------|
|           goods-list部分             |
|-------------------------------------|
|             load-more部分            |
|-------------------------------------|
|                t-toast               |
---------------------------------------

The following is an analysis of each part:

1. pageLoadingSection: The section is rendered conditionally, pageLoadingshowing a centered loading indicator ( t-loading) if the variable is true.

2. home-page-headerSection: This section represents the header area of ​​the home page. It contains a search bar ( t-search) with a placeholder text ("iphone
   16 on sale") and a disabled state. The left icon ( ) of the search bar t-iconuses the "search" icon prefixed with "wr".

3. swiper-wrapSection: This section contains a carousel component ( t-swiper) that displays a series of image slideshows. Images imgSrcsare provided through an array, and the carousel supports autoplay, navigation buttons, and navToActivityDetailevent triggers when images are clicked.

4. home-page-containerSection: This section represents the main content container of the home page. It contains a tab component ( t-tabs) that contains multiple tab panels ( t-tab-panel). The number of tab panels is tabListdetermined by the array. Each tab panel has a tabListlabel and value based on the elements in the array. When a tab is selected, tabChangeHandlethe function is called.

5. goods-listgoods-listSection: This section displays a list of items using a custom component . It accepts goodsListan array as input data and provides event handlers ( goodListClickHandle, goodListAddCartHandle) to handle item clicks and additions to the cart.

6. load-moreSection: This section handles pagination or lazy loading functionality. It contains load-morecomponents that goodsListLoadStatusshow different states (loading, error, empty list) depending on the variable. The function is called when the user retries to load more data onReTry.

7. t-toastSection: This section represents a tooltip component ( t-toast) used to display a notification or message to the user.

How to use TDesign UI in this project

the code

{
  "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"
  }
}

This code is a configuration file for a mini program page, which is used to define some properties of the page and reference components.

• navigationBarTitleText: Set the title of the navigation bar to "Home".
• onReachBottomDistance: Defines the distance to trigger the pull-up to load more as 10px.
• backgroundTextStyle: Set the background text style to "light", which may refer to the setting of the background text color or style.
• enablePullDownRefresh: Enable the pull-down refresh function, allowing users to pull down the page to refresh.

When using the TDesign UI component library, import the required components through the "usingComponents" field. Each component has an alias and path.

For example:

• "t-search": "tdesign-miniprogram/search/search" means that the search component named "t-search" is imported, and the path is "tdesign-miniprogram/search/search".
• "goods-list": "/components/goods-list/index" means that the product list component named "goods-list" is imported, and the path is "/components/goods-list/index".

You can use these components directly in the WXML file of the page, for example:

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

Summary of using TDesign UI to build your own pages

The following are the general steps to build a page using the WeChat Mini Program framework:

1. Create a project: First, create a new Mini Program project in the WeChat developer tools.

2. Page structure: Mini Programs use componentization to build pages. Each page consists of a .wxmlfile, a .wxssfile, a .jsfile, and a .jsonfile. .wxmlThe file defines the structure of the page, .wxssthe file defines the style of the page, .jsthe logic of the file processing page, and .jsonsome parameters of the file configuration page.

3. Page layout: .wxmluse the components provided by the applet in the file to build the layout of the page. For example, use <view>the component as a container, use <text>the component to display text content, use <image>the component to display pictures, and so on. According to design requirements and functional requirements, select TDesign UI for layout.

4. Import component library: .jsonimport TDesign UI in the file so that .wxmlthe file can be used normally

5. Style settings: .wxssWrite style rules in the file to beautify the appearance of the page. You can use CSS properties to adjust the element's size, color, margin and other style properties.

6. Interaction logic: .jsWrite the interaction logic of the page in the file. Realize the dynamic effect and interactive behavior of the page by listening to events and calling APIs. For example, responding to button click events, sending network requests, updating data, etc.

7. Data transfer and state management: The method can be used in the applet setData()to update page data, and render the data to the view through data binding. For complex state management, you can consider using the data management solution provided by the framework or a third-party state management library.

8. Debugging and optimization: During the development process, use the debugging function provided by the WeChat developer tools to test and debug the page. Optimize the page based on user feedback and performance indicators, including reducing network requests, optimizing rendering performance, and improving user experience.