1. 设置验证码按钮
//opacity是为了让用户点击一次获取验证码后让按钮颜色变淡,并倒计时显示60秒 //timer 一开始默认值为 ‘获取验证码‘ <view style="opacity: {{opacity}}" bindtap=‘sendCodeClick‘>{{timer}}</view>
2. 调用验证码接口,并传入手机号
//获取验证码 getCode = function () { //一般短信验证码获取主要是传入手机号,有不同需求还可以传不同值 var data={ mobile:that.data.mobile, //手机号 type:1, } //后端功能接口问公司后台人员要 //调用接口,我个人后台接口进行了Promise,这边主要是调用获取验证码接口,并通过res来判断是否发生成功 sendCode(data).then(res=>{ wx.showToast({ title: ‘发送成功‘, icon: ‘success‘, duration: 1000 }); }) }
3. 验证码按钮事件sendCodeClick
sendCodeClick: function () { var that = this; if (that.data.timer != ‘获取验证码‘) { //判断有没有点击获取验证码按钮,有点击的话会把获取验证码按钮的文字变为还剩多少秒 //在倒计时结束前都不能再进行获取验证码操作 return false; } if (that.data.mobile == ‘‘) { //如果电话等于空提示请输入手机号 wx.showModal({ title: ‘提示‘, confirmColor: ‘#0661F6‘, content: ‘请输入手机号码‘, showCancel: false }) return; } if (!(/^1[3456789]\d{9}$/.test(that.data.mobile))) { //对输入的手机号进行正则匹配,看是否符合格式,如果不符合进行弹窗提示 wx.showModal({ title: ‘提示‘, content: ‘手机号码格式不正确‘, confirmColor: ‘#0661F6‘, showCancel: false }); return; } getCode(); //如果都没以上问题就可以正确调用发送getCode()方法 var time = 60; //初始化一个倒计时时间 var setTime = function () { //设置倒计时方法 if (time > 0) { //如果时间还大于0就是倒计时还没结束 setTimeout(function () { //定时器 time--; //每次减一秒 that.setData({ //减完并设置按钮显示文字timer为还剩多少秒,并让按钮颜色变淡 timer: ‘还剩‘ + time + ‘秒‘, opacity: 0.43 }) setTime(); //递归调用,重复执行定时器操作直到时间为0退出 }, 1000); } else { //退出定时后,把按钮文字重新设置为获取验证码,按钮设置为完全显示 that.setData({ timer: ‘获取验证码‘, opacity: 1 }) } } setTime(); //执行倒计时方法 },