微信小程序----短信验证码倒计时插件

最新推荐文章于 2025-06-29 21:00:44 发布

原创最新推荐文章于 2025-06-29 21:00:44 发布 · 2.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

微信小程序专栏收录该内容

82 篇文章

订阅专栏

本文介绍了一个用于微信小程序的验证码倒计时插件的实现方法，包括插件的使用步骤及注意事项，适用于希望优化用户体验的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

WXRUI体验二维码

WXRUI体验码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

效果图

短信验证码倒计时插件演示图

JS

// 倒计时插件
class CountTime {
  constructor(page) {
    this.page = page;
    this.time = 60;
    this.timer = null;
    this.page.setData({ code: '获取验证码', flag: false });
  }
  countTime() {
    this.page.setData({ flag: true });
    if (this.time > 0) {
      this.time--;
      this.page.setData({ code: this.time + 's后获取' });
      this.timer = setTimeout(() => {
        this.countTime();
      }, 1000);
    } else {
      this.time = 60;
      clearTimeout(this.timer);
      this.page.setData({ code: '获取验证码', flag: false });
    }
  }
}
module.exports = CountTime;

使用方法

1.引入插件countTime.js

const CountTime = require("../../utils/countTime.js");

2.在 onLoad 周期初始化

this.time = new CountTime(this);

3.在点击获取二维码按钮中使用

// 调用验证码获取倒计时方法
getCode(){
    let phoneCodeVerification = /^[1][3,4,5,7,8][0-9]{9}$/;
    if (phoneCodeVerification.test(this.data.phone)){
        if (!this.data.flag) {
        this.time.countTime();
        // 获取验证码
        this.getCodeData();
        }else{
        this.wetoast.toast({ title: '请不要急躁，60s后再次获取！' });
        }
    }else{
        this.wetoast.toast({ title: '手机号码格式不正确，请重新输入！'});
    }
}

4.完整使用方法

const CountTime = require("../../utils/countTime.js");
const urlList = require("../../utils/config.js");
const app = getApp();
Page({
  onLoad(){
    this.time = new CountTime(this);
    // 构建WeToast
    this.wetoast = new app.WeToast();
  },
  // 获取手机号码
  getPhone(e){
    this.setData({phone: e.detail.value})
  },
  // 获取验证码
  getCodeData() {
    app.globalMethod.POST({
      url: urlList.getModifyPersonalInfoCodeUrl,
      data: { phone: this.data.phone, type: 1 },
      success: res => {
        // console.log(res)
        if (res.data.code == "200") {
          this.wetoast.toast({ title: '验证码发送成功，请注意查收！' });
        } else {
          this.wetoast.toast({ title: res.data.message });
        }
      }
    })
  },
  // 调用验证码获取倒计时方法
  getCode(){
    let phoneCodeVerification = /^[1][3,4,5,7,8][0-9]{9}$/;
    if (phoneCodeVerification.test(this.data.phone)){
      if (!this.data.flag) {
        this.time.countTime();
        // 获取验证码
        this.getCodeData();
      }else{
        this.wetoast.toast({ title: '请不要急躁，60s后再次获取！' });
      }
    }else{
      this.wetoast.toast({ title: '手机号码格式不正确，请重新输入！'});
    }
  }
})