TDesign Miniprogram 初探

一、前置知识和环境准备

• 前置知识
  • 小程序简易教程
  • 自定义组件介绍
  • 官方文档
• 环境准备
  • 微信开发者工具

二、安装配置

使用npm (查看小程序的对npm的支持)

npm i tdesign-miniprogram -S --production

构建npm

在微信开发者工作的“工具”栏中，点击“构建npm”，完成之后会提示构建的时间，同时会生成miniprogram_npm文件夹

使用组件

在json文件中引入，然后在wxml中使用即可(官网的快速开始似乎写错了)

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

<t-button theme="primary">按钮</t-button>

三、简单实战

准备做一个简单的登录页，来体验这套UI组件。 引入组件

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

使用组件

<!-- pages/login/login.wxml -->
<view class="container">
  <text class="title">登录</text>
  <t-input class="input" name="手机号" placeholder="请输入手机号码"></t-input>
  <t-input class="input" name="验证码" placeholder="请输入验证码"></t-input>
  <t-button class="loginBtn" theme="primary">登录</t-button>
</view>

再加一点样式

/* pages/login/login.wxss */
.title{
    margin-bottom: 80rpx;
}
.input{
    width: 90%;
    /* 下面是为了解决下面横线偏移 */
    margin-right: 32rpx; 
}
.loginBtn{
    margin-top: 80rpx;
}
.verify {
    font-size: 32rpx;
    color: #0052d9;
}

这样就完成了

这样也太简单了些，添加一点点细节

给t-input组件绑定value，添加发送验证码的按钮，同时添加对应的方法。 添加了t-toast组件展示“短信已发送”的提示 还添加t-loading了组件，为了添加遮罩搭配了t-popup一起使用。

<!-- pages/login/login.wxml -->
<view class="container">
  <text class="title">登录</text>
  <t-input
    class="input"
    placeholder="请输入手机号码"
    value="{{ phoneNumber }}"
    type="number"
    error-message="{{ phoneError ? '手机号输入不正确' : '' }}"
    bindblur="onPhoneInput"
  >
    <view slot="suffix" >
      <text wx:if="{{countdown < 0}}" class="verify" bind:tap="getVerifycode"> 发送验证码 </text>
      <text wx:else> {{ countdown + '秒后重新获取' }} </text> 
    </view>
  </t-input>
  <t-input class="input" name="" placeholder="请输入验证码"></t-input>
  <t-button class="loginBtn" theme="primary">登录</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>

引入组件

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

添加数据和方法

// pages/login/login.js
import Toast from 'tdesign-miniprogram/toast/index';
Page({
  data: {
    phoneError: false,
    phoneNumber: '',
    countdown: -1,
    isLoading: false,
    verifycode: '',
    visible: true
  },
  // 手机号input失去焦点
  onPhoneInput(e) {
    const {
      phoneError
    } = this.data;
    const isPhoneNumber = /^[1][3,4,5,7,8,9][0-9]{9}$/.test(e.detail.value);
    if (phoneError === isPhoneNumber) {
      this.setData({
        phoneError: !isPhoneNumber,
      });
    }
  },
  // 获取验证码
  getVerifycode(){
    if(this.data.phoneError || !this.data.phoneNumber) {
      Toast({
        context: this,
        selector: '#t-toast',
        message: '请输入正确的手机号',
        placement: 'bottom',
        duration: 1000,
      });
      return
    }
    this.setData({ isLoading: true })
    setTimeout(() => {
      // 假装请求了接口
      this.setData({ isLoading: false })
      Toast({
        context: this,
        selector: '#t-toast',
        message: '短信已发送，请稍后',
        placement: 'bottom',
        duration: 1000,
      });

    }, 1000);
    this.setData({
      countdown: 60
    })
    setInterval(() => {
      this.setData({
        countdown: this.data.countdown - 1
      })
    }, 1000);
  }
})

这样一个登录页就基本完成了。