微信小程序实现发送验证码按钮效果
更新时间:2022年05月24日 08:16:44 作者:奋斗的小绿萝
这篇文章主要为大家详细介绍了微信小程序实现发送验证码按钮效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序发送验证码按钮效果展示的具体代码,供大家参考,具体内容如下
首先上图,最终效果如下:
实现关键点
- 获取验证码按钮无边框: 可以用 button::after{ border: none; } 来去除边框,或者直接用view绑定点击事件。本例子中没有使用button
- 点击发送后,60秒内按钮处于disable状态
- 点击发送后,text分为剩余秒数和后缀两部分
- .form_group 使用 flex 布局
代码
.wxml
<view class="form_group"> <input type="text" placeholder="手机号码" placeholder-class="placeholder_style" data-name="data_phone" value="{{data_phone}}" bindinput='getInputKey' /> </view> <view class="form_group"> <input type="text" class="sendmsg_input" placeholder="短信验证码" data-name="data_code" value="{{data_code}}" placeholder-class="placeholder_style" bindinput='getInputKey' /> <view class='vertificate' bindtap="getVerificationCode">{{time}} <text>{{suffix}}</text> </view> </view>
.wxss
.form_group { display: flex; flex-direction: row; justify-content: space-between; } .form_group input, .form_group picker { width: 676rpx; border-bottom: 1px solid #ddd; height: 121rpx; padding-left: 20rpx; font-family: PingFangSC-Regular; font-size: 32rpx; letter-spacing: 0; line-height: 121rpx; } .form_group .sendmsg_input { width: 370rpx; } .form_group .vertificate { width: 326rpx; border-bottom: 1px solid #ddd; height: 121rpx; padding-left: 20rpx; font-family: PingFangSC-Regular; font-size: 32rpx; letter-spacing: 0; line-height: 121rpx; text-align: center; color: #34c9c3; } .vertificate text { color: gray; } .placeholder_style { font-family: PingFangSC-Regular; font-size: 32rpx; color: #dbdbdb; letter-spacing: 0; }
.js
import SignupService from '../service/sign-up.service.js'; import HTTP from '../../../utils/http.js'; import Util from '../../../utils/util.js'; let _signupService = new SignupService(); let _http = new HTTP(); let _util = new Util(); Page({ data: { time: "获取验证码", currentTime: 61, disabled:false, suffix:'', data_phone:'', data_code:'', }, ... // 获取输入框的值 getInputKey(e) { let key = e.currentTarget.dataset.name; let value = e.detail.value; this.setData({ [key]: value }) }, // 获取验证码 getVerificationCode() { let _this = this; if (!_this.data.disabled) { _this.getCode(); } }, getCode() { let _this = this; let phone = _this.data.data_phone; if (_util.isPhoneAvailable(phone)) { _signupService.getCode(phone).then(res=>{ // 调用后端API,获取手机验证码 _util.showToast('success',"已发送"); _this.setData({ disabled: true }) },err=>{ _util.showToast('none',"发送失败") }); // 设置发送验证码按钮样式 let interval = null; let currentTime = _this.data.currentTime; interval = setInterval(function() { currentTime--; _this.setData({ time: currentTime, suffix: '秒后可重新获取' }) if (currentTime <= 0) { clearInterval(interval) _this.setData({ time: '重新发送', suffix: '', currentTime: 61, disabled: false }) } }, 1000) } else { _util.showToast('none','请输入正确的手机号码。'); } },
sign-up.service.js
//获取手机验证码 getCode(phone){ return _http.request({ type: 'post', url: '/account/validate-codes', data: { phone:phone } }) }
http.js: 封装wx.request 为Promise
class HTTP { request(param){ let _this = this; let baseUrl = '.......'; return new Promise((resolve, reject) => { let access_token = wx.getStorageSync('access_token'); wx.request({ method: param.type || 'get', url: baseUrl+ param.url || '', data: param.data || null, header: access_token ? { 'content-type': 'application/x-www-form-urlencoded', "Authorization": `Bearer ${access_token}` } : { 'content-type': 'application/x-www-form-urlencoded', }, success: (res => { if (res.statusCode === 200 || res.statusCode === 201) { //200: 服务端业务处理正常结束 resolve(res.data) } else { //其它错误,提示用户错误信息 /*** * 需要根据接口文档改!!! */ reject(res) } }), fail: (err => { if(err.responseJSON){ reject(err.responseJSON.message) }else{ reject(err); } }) }); }); } } export default HTTP;
util.js
// 验证手机号码是否有效 isPhoneAvailable(phone) { var myreg = /^[1][3,4,5,7,8][0-9]{9}$/; if (!myreg.test(phone)) { return false; } else { return true; } } //小程序弹框提示 showToast(icon,msg,duration=2000){ wx.showToast({ title: msg, duration: duration, icon: icon }) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
最新评论