微信小程序实现接收验证码

本文实例为大家分享了微信小程序实现接收验证码的具体代码，供大家参考，具体内容如下

效果如下图：

wxml部分如下：

<!--验证码-->
  <view class="mod t-name" style='position:relative'>
    <text class="key">验证码:</text>
    <input type="digit" bindinput="bindKeyInput" data-inputname="phoneCode" value='{{phoneCode}}' class="input" maxlength="100" placeholder="请输入手机验证码" />
    <text class='logbook'></text>
    <text class='getkey' bindtap="clickGainCode">{{tipsCode}}</text>
</view>

css部分代码如下：

.mod{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  padding: 0 20rpx;
  border-bottom:1rpx solid #ccc;
  box-sizing: border-box;
}
.mod .key{
  font-size: 28rpx;
  font-weight: bold;
  text-align: right;
  width: 160rpx;
}
.t-name{
  background-color: rgb(254,254,254);
  box-sizing: border-box;
}
.t-name .input{
  width: 540rpx;
  font-size: 28rpx;
  margin-left: 30rpx;
}
.logbook {
  font-size: 24rpx;
  width: 150rpx;
  text-align: right;
  font-weight: bold;
}

.getkey {
  width: 200rpx;
  position: absolute;
  right: 0rpx;
  text-align: center;
  color: rgb(31, 45, 210);
  font-size: 24rpx;
  border-left: 1px solid #f0f0f0;
}

js的data里定义如下内容：

data: {
        tipsCode: "获取验证码",
        timeNum: 60,
        clikType: false,
        phone: null,
        phoneCode: null,
      }

获取验证码方法如下：

 bindKeyInput: function(e) {
    this.data[e.currentTarget.dataset.inputname] = e.detail.value;
    this.setData(this.data);
  },
  //获取验证码时的显示时间
  getTime() {
    var that = this;
    var timer = setInterval(function() {
      that.data.timeNum--;
      if (that.data.timeNum <= 0) {
        that.setData({
          tipsCode: "重新获取验证码",
          timeNum: timeOut,
          clikType: false
        });
        clearInterval(timer);
      } else {
        that.setData({
          tipsCode: "重新发送" + that.data.timeNum + "秒",
        })
      }
    }, 1000)
  },

  //输入手机号获取验证码
  gainCode() {
    var that = this;
    if (this.data.phone == '' || this.data.phone == null) {
      wx.showToast({
        title: '手机号不能为空',
        icon: 'none',
      })
    }  else {
      that.setData({
        clikType: true
      })
      if (this.data.timeNum < timeOut) {
      } else {
        wx.request({
          url: wxapp_api_url + '/common/getCode',
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          method: "get",
          data: {
            phone: this.data.phone
          },
          success: function(res) {
            that.getTime();
          }
        })
      }
    }
  },
  // 点击获取手机验证码
  clickGainCode(e) {
    if (!this.data.clikType) {
      this.gainCode();
    }
  },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。