• <menu id="gyy0e"><u id="gyy0e"></u></menu>
  • <menu id="gyy0e"></menu>
  • <menu id="gyy0e"><sup id="gyy0e"></sup></menu>
    <tt id="gyy0e"></tt>
  • 首页客户案例品牌营销网站建设微信小程序开发百度优化+营销关于我们新闻联系咨询

    小程序验证码倒计时

    2018年04月19日

    现在好多小程序都没有用到手机号的登录,因为可以直接调用微信的接口,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;}


    本文来源于广州网站建设公司与广州网站设计制作公司-广帆互动广州公司!

    标签: 小程序验证码倒计时

    填写您的联系方式并验证获取报价。

    * 下载报价如有疑问,请与我们的销售顾问取得联系。
    线上服务咨询微信二维码020-82109236填写需求索取报价
    我要安装360彩票