土鳖小屋

 找回密码
 欢迎注册

QQ登录

只需一步,快速开始

03广告位出售中
www.8am8.cn配资
千款手游私服页游私服
搜狗联盟招募 收益最高
亿恩免费建网站 服务器特价
【网维体】微信营销平台
【多线高防】无视一切攻击!
2018世界杯
百度站长平台 精确提升SEO
21广告位高权重链接招租
绝地求生辅助
大型装修门户助您抢占商机天翼云主机 四川资源池开启
国内/香港主机/试用/更有免费
微信小程序微信营销项目诚招代理
122广告位出售中
北京pk10注册网 
    查看: 11|回复: 0
    收起左侧

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

    [复制链接]
    弗罗多 发表于 2018-4-14 07:49 | 显示全部楼层 |阅读模式
    阿里云学生主机9.9元
    悦淘淘

    马上注册,结交更多好友,享用更多功能,让你轻松玩转土鳖小屋

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

    x

    现在好多小程序都没有用到手机号的登录,因为可以直接调用微信的接口,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;}
      复制代码
      100427p3s9s9uyulyzln3g.png
    • 操作的结果为:
    • 100438bwefefzq1yifwitw.png

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

    本版积分规则

    今日挖金秘籍

    QQ|手机版|小黑屋|土鳖小屋 ( 豫ICP备14000521号-2  

    GMT+8, 2018-4-24 01:16

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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