TDesign Miniprogram que

1. Pre-knowledge and environment preparation

• Front knowledge
  • Small procedure simple tutorial
  • This section describes custom components
  • The official documentation
• Environment to prepare
  • Wechat developer tools

Two, installation and configuration

Use NPM (see applet support for NPM)

npm i tdesign-miniprogram -S --production
Copy the code

Build the NPM

In the “Tools” bar of wechat developer work, click “Build NPM”. After completion, the time of build will be prompted and the miniprogram_nPM folder will be generated

Using the component

Just import it in json file and use it in WXML.

{
  "usingComponents": {
    "t-button": "tdesign-miniprogram/button/button",}Copy the code

<t-button theme="primary">button</t-button>
Copy the code

Three, simple combat

Prepare a simple login page to experience the UI components. The introduction of the component

// pages/login/login.json
{
  "usingComponents": {
    "t-input": "tdesign-miniprogram/input/input"."t-button": "tdesign-miniprogram/button/button"}}Copy the code

Using the component

<! -- pages/login/login.wxml -->
<view class="container">
  <text class="title">The login</text>
  <t-input class="input" name="Mobile phone Number" placeholder="Please enter your mobile phone number."></t-input>
  <t-input class="input" name="Verification code" placeholder="Please enter the verification code."></t-input>
  <t-button class="loginBtn" theme="primary">The login</t-button>
</view>
Copy the code

A little bit more style

/* pages/login/login.wxss */
.title{
    margin-bottom: 80rpx;
}
.input{
    width: 90%;
    /* The following is to solve the following horizontal offset */
    margin-right: 32rpx; 
}
.loginBtn{
    margin-top: 80rpx;
}
.verify {
    font-size: 32rpx;
    color: #0052d9;
}
Copy the code

And you’re done

That’s too easy. Add a little detail

Bind value to the T-Input component, add the button that sends the verification code, and add the corresponding method. T-toast component was added to display the message “SMS has been sent”. T-loading component was added, and t-popup was used together to add masks.

<! -- pages/login/login.wxml -->
<view class="container">
  <text class="title">The login</text>
  <t-input
    class="input"
    placeholder="Please enter your mobile phone number."
    value="{{ phoneNumber }}"
    type="number"
    error-message="{{ phoneError ? 'Mobile phone number entered incorrectly' : '}}"
    bindblur="onPhoneInput"
  >
    <view slot="suffix" >
      <text wx:if="{{countdown < 0}}" class="verify" bind:tap="getVerifycode">Send verification code</text>
      <text wx:else>{{countdown + 'refetch after seconds'}}</text> 
    </view>
  </t-input>
  <t-input class="input" name="" placeholder="Please enter the verification code."></t-input>
  <t-button class="loginBtn" theme="primary">The login</t-button>
  <t-popup
  visible="{{isLoading}}" placement="center" >
  <view  slot="content" >
    <t-loading theme="circular" size="40rpx" loading t-class-indicator="indicator-blue"></t-loading>
  </view>
</t-popup>
<t-toast id="t-toast" />
</view>
Copy the code

The introduction of the component

// pages/login/login.json
{
  "usingComponents": {
    "t-input": "tdesign-miniprogram/input/input"."t-button": "tdesign-miniprogram/button/button"."t-loading": "tdesign-miniprogram/loading/loading"."t-toast": "tdesign-miniprogram/toast/toast"."t-popup": "tdesign-miniprogram/popup/popup"}}}Copy the code

Add data and methods

// pages/login/login.js
import Toast from 'tdesign-miniprogram/toast/index';
Page({
  data: {
    phoneError: false.phoneNumber: ' '.countdown: -1.isLoading: false.verifycode: ' '.visible: true
  },
  // Mobile input loses focus
  onPhoneInput(e) {
    const {
      phoneError
    } = this.data;
    const isPhoneNumber = ,4,5,7,8,9 / ^ [1] [3] [0-9] {9} $/.test(e.detail.value);
    if (phoneError === isPhoneNumber) {
      this.setData({
        phoneError:! isPhoneNumber, }); }},// Get the verification code
  getVerifycode(){
    if(this.data.phoneError || !this.data.phoneNumber) {
      Toast({
        context: this.selector: '#t-toast'.message: 'Please enter the correct mobile phone number'.placement: 'bottom'.duration: 1000});return
    }
    this.setData({ isLoading: true })
    setTimeout(() = > {
      // pretend to request an interface
      this.setData({ isLoading: false })
      Toast({
        context: this.selector: '#t-toast'.message: 'SMS sent, please hold on'.placement: 'bottom'.duration: 1000}); },1000);
    this.setData({
      countdown: 60
    })
    setInterval(() = > {
      this.setData({
        countdown: this.data.countdown - 1})},1000); }})Copy the code

The landing page is almost complete.