uniapp微信小程序验证码获取与倒计时功能实现

1. 数据定义与模板绑定

2. 倒计时逻辑实现

methods: {
  startCountdown() {
    this.countdown = 60
    this.isCounting = true
    
    const timer = setInterval(() => {
      if (this.countdown <= 0) {
        clearInterval(timer)
        this.isCounting = false
        return
      }
      this.countdown--
    }, 1000)
  }
}

3. 手机号验证与请求发送

async getCode() {
  // 正则校验
  const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
  if (!reg.test(this.phone)) {
    uni.showToast({ title: '手机号格式错误', icon: 'none' })
    return
  }

  // 发送验证码请求
  try {
    const res = await uni.request({
      url: '/api/sendSms',
      method: 'POST',
      data: { phone: this.phone }
    })
    
    if (res.data.code === 200) {
      this.startCountdown()
    }
  } catch (err) {
    uni.showToast({ title: '发送失败', icon: 'none' })
  }
}

4. 完整参考案例

上一篇：uniapp微信小程序引入vant组件库

下一篇：使用Cursor快速开发微信小程序