土鳖屋源码社区

 找回密码
 欢迎注册

QQ登录

只需一步,快速开始

03广告位出售中
广告出售中
广告位
联盟招募 收益最高
免费建网站 服务器特价
网维体微信营销平台
【多线高防】无视一切攻击!织梦模板
站长平台 精确提升SEO
21广告位高权重链接招租
微信抢红包源码云主机
国内/香港主机/试用免费
微信小程序微信营销项目
小程序
源码商城棋牌源码
查看: 149|回复: 0

[新手基础] 小程序手机验证码倒计时是如何实现的?

[复制链接]
弗罗多 发表于 2018-4-14 07:49 | 显示全部楼层 |阅读模式

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

问题:

  • 简单描述一下功能:输入手机号,点击获取验证码。我必须在点击那个获取验证按钮之前,在js中获取手机号。
  • 如何获取到input提交之前的输入值呢?

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

    解决方法:

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

    2. //page中添加属性(事件)
    3. mobileInputEvent:function(e){
    4.     this.setData({
    5.       mobile:e.detail.value
    6.     })
    7. },
    8. verifyCodeEvent:function(e){
    9.     if(this.data.buttonDisable) return false;
    10.     var that = this;
    11.     var c = 60;
    12.     var intervalId = setInterval(function(){
    13.       c = c-1;
    14.       that.setData({
    15.         verifyCodeTime:c + 's后重发',
    16.         buttonDisable:true
    17.       })
    18.       if(c==0){
    19.         clearInterval(intervalId);
    20.         that.setData({
    21.           verifyCodeTime:'获取验证码',
    22.           buttonDisable:false
    23.         })
    24.       }
    25.     },1000)
    26.     var mobile = this.data.mobile;
    27.     var regMobile = /^1\d{10}$/;
    28.     if(!regMobile.test(mobile)){
    29.         wx.showToast({
    30.           title:'手机号有误!'
    31.         })
    32.         return false;
    33.     }
    34.     app.sendVerifyCode(function(){},mobile);//获取短信验证码接口
    35. }
    36. 代码解释:mobileInputEvent代表输入的手机号码

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



    38. wxml代码:

    39. <!--使用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>
    40. wxss代码:

    41. /**弹出框**/ .btn {
    42.   width: 80%;  
    43.   padding: 20rpx 0;  
    44.   border-radius: 10rpx;  
    45.   text-align: center;  
    46.   margin: 40rpx 10%;  
    47.   background: #000;  
    48.   color: #fff;  
    49. }
    50.    
    51. /*mask*/ .drawer_screen {
    52.   width: 100%;  
    53.   height: 100%;  
    54.   position: fixed;  
    55.   top: 0;  
    56.   left: 0;  
    57.   z-index: 1000;  
    58.   background: #000;  
    59.   opacity: 0.5;  
    60.   overflow: hidden;  
    61. }
    62.    
    63. /*content*/ .drawer_box {
    64.   width: 650rpx;  
    65.   overflow: hidden;  
    66.   position: fixed;  
    67.   top: 50%;  
    68.   left: 0;  
    69.   z-index: 1001;  
    70.   background: #FAFAFA;  
    71.   margin: -150px 50rpx 0 50rpx;  
    72.   border-radius: 3px;  
    73. }
    74.    
    75. .drawer_title{
    76.   padding:15px;  
    77.   font: 20px "microsoft yahei";  
    78.   text-align: center;  
    79. }
    80. .drawer_content {
    81.   height: 210px;  
    82.   overflow-y: scroll; /*超出父盒子高度可滚动*/
    83. }
    84.    
    85. .btn_ok{
    86.   padding: 10px;  
    87.   font: 20px "microsoft yahei";  
    88.   text-align: center;  
    89.   border-top: 1px solid #E8E8EA;  
    90.   color: #3CC51F;  
    91.   float: right;
    92. }
    93. .btn_concel{
    94.   padding: 10px;  
    95.   font: 20px "microsoft yahei";  
    96.   text-align: center;  
    97.   border-top: 1px solid #E8E8EA;  
    98.   color: #3CC51F;  
    99.   float: left;
    100. }   
    101. .top{
    102.     padding-top:8px;  
    103. }
    104. .bottom {
    105.     padding-bottom:8px;  
    106. }
    107. .title {
    108.     height: 30px;  
    109.     line-height: 30px;  
    110.     width: 160rpx;  
    111.     text-align: center;  
    112.     display: inline-block;  
    113.     font: 300 28rpx/30px "microsoft yahei";  
    114. }
    115.    
    116. .input_base {
    117.     border: 2rpx solid #ccc;  
    118.     padding-left: 10rpx;  
    119.     margin-right: 100rpx;  
    120. }
    121. .input_h30{
    122.     height: 30px;  
    123.     line-height: 30px;  
    124. }
    125. .btn_code{
    126.   background-color: gray;
    127.   width: 180rpx;
    128.   color: white;
    129.   margin-left: 20rpx;
    130.   font-size: 25rpx;
    131.   line-height: 60rpx;
    132.   text-align: center;
    133. }
    134. .input_view{
    135.     font: 12px "microsoft yahei";  
    136.     background: #fff;  
    137.     color:#000;  
    138.     line-height: 30px;  
    139. }
    140. input {
    141.     font: 12px "microsoft yahei";  
    142.     background: #fff;  
    143.     color:#000 ;  
    144. }
    145. radio{
    146.     margin-right: 20px;  
    147. }
    148. .grid { display: -webkit-box; display: box; }
    149. .col-0 {-webkit-box-flex:0;box-flex:0;}
    150. .col-1 {-webkit-box-flex:1;box-flex:1;}
    151. .fl { float: left;}
    152. .fr { float: right;}
    复制代码

  • 操作的结果为:


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?欢迎注册

x
    您需要登录后才可以回帖 登录 | 欢迎注册

    本版积分规则

    QQ|小黑屋|手机版|土鳖屋源码社区 ( 豫ICP备14000521号-2 )

    GMT+8, 2018-12-19 19:25

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    豫公网安备 41088202000172号

    快速回复 返回顶部 返回列表