微信小程序之获取验证码js

在微信小程序中怎样实现获取验证码的倒计时功能，倒计时的原理是一样的，就是某些地方需要注意。

第一步结构：结构

<view class='get-code' wx:if="{{!isShow}}" bindtap='getCode'>获取验证码</view>
<view>{{sec}}秒后重新发送</view>

注意：微信小程序中要用到两个按钮，不像HTML里面一个按钮就解决了。如果非要一个的话，就需要把不变的内容即“获取验证码”与“秒后重新发送”装在一个数组里面，然后判断什么时候选择显示哪一个
备注：用wx:if条件渲染来判断某个按钮是否显示与隐藏。
{{sec}}是要动态显示的秒数，只绑定一个view的click事件就不怕重复点击了。

第二步：js
我是把这个获取验证码的函数作为公用的部分，所以新建一个公用的js文件放在你想放的目录下，然后js代码：

function getCode(_this,num){
    _this.setData({
        isShow: true                    //按钮1隐藏，按钮2显示
    })
    var remain=num;             //用另外一个变量来操作秒数是为了保存最初定义的倒计时秒数，就不用在计时完之后再手动设置秒数
    var time = setInterval(function () {
        if (remain == 1) {
            clearInterval(time);            
            _this.setData({
                sec: num,
                isShow: false
            })
            return false      //必须有
        }
        remain--;
        _this.setData({
            sec: remain
        })
    }, 1000)    
}
module.exports = {
    getCode                  //此js模块化  也可以写成getCode:getCode
}

第三步：在需要getCode函数的页面的js中引入该公用js文件，比如

var code=require('../../public/js/com.js')

第四步：在Page中申明：

data: {
    isShow:false,         //默认按钮1显示，按钮2不显示
    sec:"4"　　　　　　　　//设定倒计时的秒数
},
getCode:function(){
    var _this=this;　　　　//防止this对象的混杂，用一个变量来保存
    var time=_this.data.sec　　//获取最初的秒数
    code.getCode(_this,time);　　//调用倒计时函数
},