現(xiàn)在好多小程序都沒有用到手機(jī)號(hào)的登錄,因?yàn)榭梢灾苯诱{(diào)用微信的接口,getPhoneNumber,因?yàn)槲覀優(yōu)榱吮3止娞?hào),小程序,app后臺(tái)的一致性,,又做了手機(jī)號(hào)的登錄。
問題:
簡單描述一下功能:輸入手機(jī)號(hào),點(diǎn)擊獲取驗(yàn)證碼。我必須在點(diǎn)擊那個(gè)獲取驗(yàn)證按鈕之前,在js中獲取手機(jī)號(hào)。
如何獲取到input提交之前的輸入值呢?
3.小程序的收取短信的倒計(jì)時(shí)方法?
解決方法:
微信對(duì)input的組件,提供了多個(gè)事件,看來只能通過這些事件去實(shí)現(xiàn) 單個(gè)input的值的獲取。bindblur ,失去焦點(diǎn)事件,e.detail.value取的這個(gè)對(duì)象的值
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后重發(fā)',
buttonDisable:true
})
if(c==0){
clearInterval(intervalId);
that.setData({
verifyCodeTime:'獲取驗(yàn)證碼',
buttonDisable:false
})
}
},1000)
var mobile = this.data.mobile;
var regMobile = /^1d{10}$/;
if(!regMobile.test(mobile)){
wx.showToast({
title:'手機(jī)號(hào)有誤!'
})
return false;
}
app.sendVerifyCode(function(){},mobile);//獲取短信驗(yàn)證碼接口
}
代碼解釋:mobileInputEvent代表輸入的手機(jī)號(hào)碼
verifyCodeEvent代表點(diǎn)擊驗(yàn)證碼倒計(jì)時(shí)方法
wxml代碼:
<!--使用animation屬性指定需要執(zhí)行的動(dòng)畫 --> <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">手機(jī)號(hào)碼</label> <input class="input_base input_h30 col-1" placeholder="請(qǐng)輸入手機(jī)號(hào)碼" value="" bindblur="mobileInputEvent" ></input> </view> <view class="top grid"> <label class="title col-0">驗(yàn)證碼</label> <input class="input_base input_h30 col-1 code" placeholder="驗(yàn)證碼" 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; /*超出父盒子高度可滾動(dòng)*/
}
.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;}
本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!
網(wǎng)頁名稱:小程序驗(yàn)證碼倒計(jì)時(shí)
文章起源:http://m.rwnh.cn/news19/316469.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、服務(wù)器托管、定制網(wǎng)站、電子商務(wù)、外貿(mào)建站、營銷型網(wǎng)站建設(shè)
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)