效果：1.

源码地址：链接：https://pan.baidu.com/s/17fbWUS1jrBLbPXyEgHKVcg密码：ot16

2.

参考：https://blog.csdn.net/Beijiyang999/article/details/77885021

布局3.

viewclass"section"text手机号码/textinputplaceholder"请输入手机号码"type"number"maxlength"11"bindinput"inputPhoneNum"auto-focus'true'/textwx:if'{{send}}'class'sendMsg'bindtap'sendMsg'发送/texttextwx:if"{{alreadySend}}"class"sendMsg"bindtap"sendMsg"{{second+"s"}}/text/viewviewclass"section"text短信验证/textinputplaceholder"短信验证码"type"number"maxlength"6"bindinput"addCode"//viewbuttontype"{{buttonType}}"disabled"{{disabled}}"bindtap"onSubmit"保存/button

js方法函数//pages/info-two/info-two.jsPage({/***页面的初始数据*/data:{send:false,alreadySend:false,second:60,disabled:true,buttonType:'default',phoneNum:'',code:'',},//手机号部分inputPhoneNum:function(e){letphoneNume.detail.valueif(phoneNum.length11){letcheckedNumthis.checkPhoneNum(phoneNum)if(checkedNum){this.setData({phoneNum:phoneNum})console.log('phoneNum'+this.data.phoneNum)this.showSendMsg()this.activeButton()}}else{this.setData({phoneNum:''})this.hideSendMsg()}},checkPhoneNum:function(phoneNum){letstr/^1d{10}$/if(str.test(phoneNum)){returntrue}else{wx.showToast({title:'手机号不正确',icon:'none'})returnfalse}},showSendMsg:function(){if(!this.data.alreadySend){this.setData({send:true})}},hideSendMsg:function(){this.setData({send:false,disabled:true,buttonType:'default'})},sendMsg:function(){console.log('发送获取验证码')this.setData({alreadySend:true,send:false})//this.timer()this.countdown()},timer:function(){//Promise:ES6将其写进了语言标准获取异步操作的消息letpromisenewPromise((resolve,reject){letsetTimersetInterval((){this.setData({second:this.data.second-1})if(this.data.second0){this.setData({second:60,alreadySend:false,send:true})//resolve异步操作成功resolve(setTimer)}},1000)})//将Promise对象的状态从“未完成”变为“成功”promise.then((setTimer){console.log('resolve异步操作成功')clearInterval(setTimer)})},countdown:function(){varthatthisvarsecondthis.data.secondif(second0){that.setData({second:60})return}vartimesetTimeout(function(){that.setData({second:second-1})that.countdown(that)},1000)},//验证码addCode:function(e){console.log('验证码-addCode')this.setData({code:e.detail.value})this.activeButton()},//按钮activeButton:function(){//let{}es6的解构赋值。大括号中的key对应item的key其值也是相对应的let{phoneNum,code}this.dataconsole.log(this.data)if(phoneNum){this.setData({disabled:false,buttonType:'primary'})}else{this.setData({disabled:true,buttonType:'default'})}},//提交onSubmit:function(){console.log('onSubmit')//模拟校验验证码if(this.data.code'123456'){wx.showToast({title:'验证成功',icon:'success'})}else{wx.showToast({title:'验证失败',icon:'none'})}},/***生命周期函数--监听页面加载*/onLoad:function(options){},/***生命周期函数--监听页面初次渲染完成*/onReady:function(){},/***生命周期函数--监听页面显示*/onShow:function(){},/***生命周期函数--监听页面隐藏*/onHide:function(){},/***生命周期函数--监听页面卸载*/onUnload:function(){},/***页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh:function(){},/***页面上拉触底事件的处理函数*/onReachBottom:function(){},/***用户点击右上角分享*/onShareAppMessage:function(){}})4.

...