微信小程序實現(xiàn)接收驗證碼

更新時間：2022年05月24日 10:25:09 作者：keepfitt

這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)接收驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序實現(xiàn)接收驗證碼的具體代碼，供大家參考，具體內容如下

效果如下圖：

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: "重新發(fā)送" + 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();
? ? }
? },

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: