怎么在微信小程序中实现发送验证码按钮效果？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
公司主营业务：网站设计制作、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联推出分宜免费做网站回馈大家。
实现关键点
代码
.wxml
短信验证码" data-name="data_code" value="{{data_code}}" placeholder-class="placeholder_style" bindinput='getInputKey' />
{{time}}
{{suffix}}
.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
})
}看完上述内容，你们掌握怎么在微信小程序中实现发送验证码按钮效果的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
本文标题：怎么在微信小程序中实现发送验证码按钮效果
文章URL：
http://chengdu.cdxwcx.cn/article/jddeeg.html
