小程序：js获取验证码时（倒计时模块）

最近在上手开发小程序，发现其实小程序要比vue真的要简单太多了，有一套自己的html(WXML)，css(WXSS)，虽然有些标签不能直接沿用html5的标签来开发，不过内置的标签还是很好记也不多。今天在做公司的项目时，在做输入手机号码获取验证码这个模块功能时，突发奇想的想把这一功能写下来，虽然很简单但是为了以后不再花时间来重写，还是想写下来可以让一些刚刚入门小伙子们做个参考也好，哈！不多说直接看码：

<view> // 在小程序里，不在是div了
  <input bindinput="bindvalue" placeholder="输入手机号" /> // 这个直接用
  < button bindtap="verification">{{btntext}}</button>  //这个直接用
</view>  

bindtap是小程序绑定单击事件，bindinput是小程序实时监听表单的值，接下来js部分要在同级同名目录下js文件里写。

const app = getApp()
Page({
  data:{
    phonecode: '', // 手机号
    btntext: '获取验证码'
  },
  bindvalue(event){ // 实时监听表单输入的值
    this.setData({
      phonecode:event.detail.value
    })
  },
  verification(){ // 点击获取验证码
      //这里是要调api接口的，我这里就假装已经调成功了，返回200了
      var _this = this 
      if(json.code == 200){
        var coden = 60    // 定义60秒的倒计时
        var codeV = setInterval(function () {    
            _this.setData({    // _this这里的作用域不同了
              btntext: '重新获取' + (--coden) + 's'
            })
            if (coden == -1) {  // 清除setInterval倒计时，这里可以做很多操作，按钮变回原样等
              clearInterval(codeV)
              _this.setData({
                btntext: '获取验证码'
              })
            }
          }, 1000)  //  1000是1秒
      }
  }
})

好了，一个简单的小程序的验证码获取例子就记录好了～