258资源分享网

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