微信小程序如何接收验证码功能实现？

本文共计592个文字，预计阅读时间需要3分钟。

原文示例为：本文实例为大家分享了微信小程序实现接收验证码的具体代码，供大家参考，具体内容如下+效果图：+wxml部分如下+！--验证码--+view class=mod t-name style='position:relative' ++text+验证码++

改写后为：本例展示微信小程序接收验证码功能的代码示例，内容详如下，效果见下图：+WXML部分见下+！--验证码--++文本内容+

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

效果如下图：

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();     }   },

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