微信小程序的验证码倒计时怎么做

现在好多小程序都没有用到手机号的登录，因为可以直接调用微信的接口，getPhoneNumber，因为我们为了保持公众号，小程序，app后台的一致性，，又做了手机号的登录。

问题：

简单描述一下功能：输入手机号，****验证码。我必须在点击那个获取验证按钮之前，在js中获取手机号。

如何获取到input提交之前的输入值呢？

3.小程序的收取短信的倒计时方法？

解决方法：

微信对input的组件，提供了多个事件，看来只能通过这些事件去实现   单个input的值的获取。bindblur ，失去焦点事件，e.detail.value取的这个对象的值

js代码：

//page中添加属性（事件）

mobileInputEvent:function(e){

    this.setData({

      mobile:e.detail.value

    })

},

verifyCodeEvent:function(e){

    if(this.data.buttonDisable) return false;

    var that = this;

    var c = 60;

    var intervalId = setInterval(function(){

      c = c-1;

      that.setData({

        verifyCodeTime:c + 's后重发',

        buttonDisable:true

      })

      if(c==0){

        clearInterval(intervalId);

        that.setData({

          verifyCodeTime:'获取验证码',

          buttonDisable:false

        })

      }

    },1000)

    var mobile = this.data.mobile;

    var regMobile = /^1d{10}$/;

    if(!regMobile.test(mobile)){

        wx.showToast({

          title:'手机号有误！'

        })

        return false;

    }

    app.sendVerifyCode(function(){},mobile);//获取短信验证码接口

}

代码解释：mobileInputEvent代表输入的手机号码

verifyCodeEvent代表点击验证码倒计时方法

wxml代码：

<!--使用animation属性指定需要执行的动画   --> <view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}" > <!--drawer content--> <view class="drawer_title">登录</view> <view class="drawer_content"> <view class="top grid"> <label class="title col-0">手机号码</label> <input class="input_base input_h30 col-1" placeholder="请输入手机号码" value="" bindblur="mobileInputEvent" ></input> </view> <view class="top grid"> <label class="title col-0">验证码</label> <input class="input_base input_h30 col-1 code" placeholder="验证码" value="" bindblur='codeInputEvent'></input> <view class="btn_code" bindtap="getCode" disabled="{{buttonDisable}}" >{{verifyCodeTime}}</view> </view> </view> <view class="btn_ok" bindtap="powerDrawer" data-statu="close">确定</view> <view class="btn_concel" bindtap="concel" >取消</view> </view>

wxss代码:

/**弹出框**/ .btn {

  width: 80%;  

  padding: 20rpx 0;  

  border-radius: 10rpx;  

  text-align: center;  

  margin: 40rpx 10%;  

  background: #000;  

  color: #fff;  

}

/*mask*/ .drawer_screen {

  width: 100%;  

  height: 100%;  

  position: fixed;  

  top: 0;  

  left: 0;  

  z-index: 1000;  

  background: #000;  

  opacity: 0.5;  

  overflow: hidden;  

}

/*content*/ .drawer_box {

  width: 650rpx;  

  overflow: hidden;  

  position: fixed;  

  top: 50%;  

  left: 0;  

  z-index: 1001;  

  background: #FAFAFA;  

  margin: -150px 50rpx 0 50rpx;  

  border-radius: 3px;  

}

.drawer_title{

  padding:15px;  

  font: 20px "microsoft yahei";  

  text-align: center;  

}

.drawer_content {

  height: 210px;  

  overflow-y: scroll; /*超出父盒子高度可滚动*/

}

.btn_ok{

  padding: 10px;  

  font: 20px "microsoft yahei";  

  text-align: center;  

  border-top: 1px solid #E8E8EA;  

  color: #3CC51F;  

  float: right;

}

.btn_concel{

  padding: 10px;  

  font: 20px "microsoft yahei";  

  text-align: center;  

  border-top: 1px solid #E8E8EA;  

  color: #3CC51F;  

  float: left;

}   

.top{

    padding-top:8px;  

}

.bottom {

    padding-bottom:8px;  

}

.title {

    height: 30px;  

    line-height: 30px;  

    width: 160rpx;  

    text-align: center;  

    display: inline-block;  

    font: 300 28rpx/30px "microsoft yahei";  

}

.input_base {

    border: 2rpx solid #ccc;  

    padding-left: 10rpx;  

    margin-right: 100rpx;  

}

.input_h30{

    height: 30px;  

    line-height: 30px;  

}

.btn_code{

  background-color: gray;

  width: 180rpx;

  color: white;

  margin-left: 20rpx;

  font-size: 25rpx;

  line-height: 60rpx;

  text-align: center;

}

.input_view{

    font: 12px "microsoft yahei";  

    background: #fff;  

    color:#000;  

    line-height: 30px;  

}

input {

    font: 12px "microsoft yahei";  

    background: #fff;  

    color:#000 ;  

}

radio{

    margin-right: 20px;  

}

.grid { display: -webkit-box; display: box; }

.col-0 {-webkit-box-flex:0;box-flex:0;}

.col-1 {-webkit-box-flex:1;box-flex:1;}

.fl { float: left;}

.fr { float: right;}