【移動(dòng)應(yīng)用開發(fā)技術(shù)】微信小程序中input輸入及動(dòng)態(tài)設(shè)置按鈕的實(shí)現(xiàn)方法

【移動(dòng)應(yīng)用開發(fā)技術(shù)】微信小程序中input輸入及動(dòng)態(tài)設(shè)置按鈕的實(shí)現(xiàn)方法

這篇文章給大家分享的是有關(guān)微信小程序中input輸入及動(dòng)態(tài)設(shè)置按鈕的實(shí)現(xiàn)方法的內(nèi)容。在下覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨在下過來看看吧。微信小程序input輸入及動(dòng)態(tài)設(shè)置按鈕的實(shí)現(xiàn)【需求】實(shí)現(xiàn)當(dāng)手機(jī)號(hào)已填寫和協(xié)議已勾選時(shí)，“立即登錄”按鈕變亮，按鈕可點(diǎn)擊；若有一個(gè)不滿足，按鈕置灰，不可點(diǎn)擊；實(shí)現(xiàn)獲取短信驗(yàn)證碼，倒計(jì)時(shí)提示操作；對(duì)不滿足要求內(nèi)容進(jìn)行toast彈窗提示。<view

class="container">

<!--手機(jī)號(hào)-->

<view

class="section">

<text

class="txt">手機(jī)號(hào)</text>

<input

value="{{mobile}}"

placeholder-class="placeholder"

placeholder="11位手機(jī)號(hào)碼"

type="number"

maxlength="11"

bindinput="mobileInput"/>

</view>

<!--圖片驗(yàn)證碼-->

<view

class="section">

<view>

<text

class="txt">圖形驗(yàn)證碼</text>

<input

placeholder-class="placeholder"

placeholder="輸入圖形驗(yàn)證碼"

type="text"

maxlength="4"

bindinput="imgCaptchaInput"/>

</view>

<image

class="imgBtn"

src="{{imgCodeSrc}}"

bindtap="getImgCode"></image>

</view>

<!--短信驗(yàn)證碼-->

<view

class="section">

<view>

<text

class="txt">驗(yàn)證碼</text>

<input

placeholder-class="placeholder"

placeholder="輸入驗(yàn)證碼"

type="number"

maxlength="6"

bindinput="smsCaptchaInput"/>

</view>

<view

class="smsBtn"

bindtap="getSMS">{{captchaText}}</view>

</view>

<view

class="agree"

style="margin-top:40rpx">

<checkbox-group

bindchange="checkboxChange">

<checkbox

class="check"

value="1"

checked="true"

bindchange="checkboxChange"></checkbox>

</checkbox-group>

<span>已閱讀并同意</span>

<text

style="color:#98c7ff"

bindtap="xieyi">《用戶使用協(xié)議》</text>

</view>

<view

class="regist

{{phoneAll&&checkAgree?'active':''}}"

bindtap="regist">立即登錄</view>

</view>

<!--mask-->

<view

class="toast_mask"

wx:if="{{isShowToast}}"></view>

<!--以下為toast顯示的內(nèi)容-->

<view

class="toast_content_box"

wx:if="{{isShowToast}}">

<view

class="toast_content">

<view

class="toast_content_text">

{{toastText}}

</view>

</view>

</view>js//

獲取全局應(yīng)用程序?qū)嵗龑?duì)象

const

app

=

getApp()

Page({

data:

{

//toast默認(rèn)不顯示

isShowToast:

false,

mobile:

'',

imgCode:

'',

code:

'',

//

inviteCode:

'',

errorContent:

'請(qǐng)輸入手機(jī)號(hào)',

timer:

60,

captchaText:

'獲取驗(yàn)證碼',

captchaSended:

false,

isReadOnly:

false,

capKey:

'',

sendRegist:

false,

imgCodeSrc:

'',

phoneAll:

false,

checkAgree:true,

checkboxValue:[1],

},

//

顯示彈窗

showToast(txt,

duration

=

1500)

{

//設(shè)置toast時(shí)間，toast內(nèi)容

this.setData({

count:

duration,

toastText:

txt

});

var

_this

=

this;

//

toast時(shí)間

_this.data.count

=

parseInt(_this.data.count)

?

parseInt(_this.data.count)

:

3000;

//

顯示toast

_this.setData({

isShowToast:

true,

});

//

定時(shí)器關(guān)閉

setTimeout(function

()

{

_this.setData({

isShowToast:

false

});

},

_this.data.count);

},

//

雙向綁定mobile

mobileInput(e)

{

this.setData({

mobile:

e.detail.value

});

if(this.data.mobile.length===11){

this.setData({

phoneAll:

true

});

}else

if(this.data.mobile.length<11){

this.setData({

phoneAll:

false

});

}

},

//

雙向綁定img驗(yàn)證碼

imgCaptchaInput(e)

{

this.setData({

imgCode:

e.detail.value

});

},

//

雙向綁定sms驗(yàn)證碼

smsCaptchaInput(e)

{

this.setData({

code:

e.detail.value

});

},

//

同意協(xié)議

checkboxChange(e)

{

this.data.checkboxValue

=

e.detail.value;

if(this.data.checkboxValue[0]==1){

this.setData({

checkAgree:

true

});

}else

{

this.setData({

checkAgree:

false

});

}

},

//

獲取短信驗(yàn)證碼

getSMS()

{

var

that

=

this.data;

if

(!that.mobile)

{

this.showToast('請(qǐng)輸入手機(jī)號(hào)');

}

else

if

(that.mobile.length

!=

11

||

isNaN(that.mobile))

{

this.showToast('請(qǐng)輸入正確手機(jī)號(hào)');

}

else

if

(that.imgCode.length

!=

4)

{

this.showToast('請(qǐng)輸入正確圖片驗(yàn)證碼');

}

else

{

if

(that.captchaSended)

return;

this.setData({

captchaSended:

true

})

app.api.getSMSByMobileAndCaptcha({

mobile:

that.mobile,

capKey:

that.capKey,

code:

that.imgCode,

type:1

}).then((result)

=>

{

this.showToast(result.message);

if

(result.code

!=

1)

{

this.getImgCode();

this.setData({

captchaSended:

false,

});

}

else

{

var

counter

=

setInterval(()

=>

{

that.timer--;

this.setData({

timer:

that.timer,

captchaText:

`${that.timer}秒`,

isReadOnly:

true

});

if

(that.timer

===

0)

{

clearInterval(counter);

that.captchaSended

=

false;

that.captchaText

=

'獲取驗(yàn)證碼';

this.setData({

timer:

60,

captchaText:

'獲取驗(yàn)證碼',

captchaSended:

false

})

}

},

1000);

}

});

}

},

//

獲取圖形碼

getImgCode()

{

var

capKey

=

"zdx-weixin"

+

Math.random();

this.setData({

imgCodeSrc:

"/invite/WeChat/verify?capKey="

+

capKey,

capKey:

capKey

});

},

//用戶使用協(xié)議

xieyi()

{

wx.navigateTo({

url:

'../userXieyi/userXieyi'

})

},

//

注冊(cè)

regist()

{

var

that

=

this.data;

if(!that.checkAgree||!that.phoneAll){

return

}

//

sessionCheck為1，目的是防止微信code碼先于session過期

var

code

=

wx.getStorageSync('wxCode');

var

sessionCheck

=

wx.getStorageSync('sessionCheck');

wx.setStorageSync('mobile',that.mobile);

if

(!that.mobile)

{

this.showToast('請(qǐng)輸入手機(jī)號(hào)');

}

else

if

(that.mobile.length

!=

11

||

isNaN(that.mobile))

{

this.showToast('請(qǐng)輸入正確手機(jī)號(hào)');

}

else

if

(that.code.length

!=

6)

{

this.showToast('請(qǐng)輸入正確驗(yàn)證碼');

}

else

{

wx.showLoading({

title:

'加載中...',

});

app.api.loginByCaptcha({

mobile:

that.mobile,

smsCode:

that.code,

code:

code,

sessionCheck:sessionCheck,

}).then((res)

=>

{

wx.hideLoading();

if

(res.code

==

2||res.code==1)

{

//注冊(cè)成功

wx.setStorageSync('token',

res.businessObj.token);

wx.setStorageSync('userId',res.businessO