小程序 -- 获取手机验证码功能代码

小草莓蹦蹦跳

已于 2023-05-11 16:59:24 修改

阅读量1.3k

点赞数

分类专栏：移动端开发常见问题微信小程序文章标签： javascript 前端开发语言微信小程序

于 2020-06-09 15:49:33 首次发布

本文链接：https://blog.csdn.net/qq_38290251/article/details/106642075

版权

微信小程序同时被 2 个专栏收录

41 篇文章 1 订阅

订阅专栏

移动端开发常见问题

39 篇文章 0 订阅

订阅专栏

1、HTML

 <button bindtap='deliver' wx:if="{{ verifySend }}" hover-class='cl35'>获取验证码</button>

 <button class='cl99' hover-class='cl35' wx:else>重新获取({{ countDown }})</button>

2、JS

    // 手机号
    mobile: '',

    // 验证码
    verify: '',

    // 是否获取验证码
    verifySend: true,

    // 倒计时
    countDown: 60,

  // 获取验证码
  deliver() {
    let that = this
    let {
      mobile,
      settime
    } = that.data
    let myreg = /^1[0-9]{10}$/

    if (!mobile) {
      $toast('请输入手机号码')

    } else if (!myreg.test(mobile)) {
      $toast('手机号格式输入错误')

    } else {
      let getCodeParams = { mobile}
      // 发生验证码
      $get(`/login/getVerificationCode`, getCodeParams, true).then(res => {
        $toast('短信验证码已发送，请注意查收', 'none', 2000)
        let time = 59
        settime = setInterval(() => {
          that.setData({
            countDown: time--
          })

          if (that.data.countDown == 0) {
            clearInterval(settime)
            that.setData({
              verifySend: true,
              settime,
              countDown: 60
            })
          }
        }, 1000)
        that.setData({
          settime,
          verifySend: false
        })
      }).catch(err => {
        let { code, msg } = err
        if(code == $WARNING){
          $toast(msg,'none',2000)
        }
      })
    }
  },