微信小程序之获取验证码js-老是收到微信小程序的验证码-微信小程序短信验证-即速应用

微信小程序之获取验证码js-老是收到微信小程序的验证码-微信小程序短信验证

浏览量：4580 时间：2020-04-06 来源：UIEngineer

1.
在微信小程序中怎样实现获取验证码的倒计时功能，倒计时的原理是一样的，就是某些地方需要注意。
2.
第一步结构：结构
viewclass'get-code'wx:if"{{!isShow}}"bindtap'getCode'获取验证码/viewview{{sec}}秒后重新发送/view注意：微信小程序中要用到两个按钮，不像HTML里面一个按钮就解决了。如果非要一个的话，就需要把不变的内容即“获取验证码”与“秒后重新发送”装在一个数组里面，然后判断什么时候选择显示哪一个备注：用wx:if条件渲染来判断某个按钮是否显示与隐藏。{{sec}}是要动态显示的秒数，只绑定一个view的click事件就不怕重复点击了。3.
第二步：js我是把这个获取验证码的函数作为公用的部分，所以新建一个公用的js文件放在你想放的目录下，然后js代码：
functiongetCode(_this,num){_this.setData({isShow:true//按钮1隐藏，按钮2显示})varremainnum;//用另外一个变量来操作秒数是为了保存最初定义的倒计时秒数，就不用在计时完之后再手动设置秒数vartimesetInterval(function(){if(remain1){clearInterval(time);_this.setData({sec:num,isShow:false})returnfalse//必须有}remain--;_this.setData({sec:remain})},1000)}module.exports{getCode//此js模块化也可以写成getCode:getCode}4.
第三步：在需要getCode函数的页面的js中引入该公用js文件，比如
varcoderequire('../../public/js/com.js')5.
第四步：在Page中申明：
data:{isShow:false,//默认按钮1显示，按钮2不显示sec:"4"　　　　　　　　//设定倒计时的秒数},getCode:function(){var_thisthis;　　　　//防止this对象的混杂，用一个变量来保存vartime_this.data.sec　　//获取最初的秒数code.getCode(_this,time);　　//调用倒计时函数},