【移动应用开发技术】微信小程序发送短信验证码完整实例

【移动应用开发技术】微信小程序发送短信验证码完整实例

微信小程序注册完整实例，发送短信验证码，带60秒倒计时功能，无需服务器端。效果图:代码:index.wxml<!--index.wxml-->

<viewclass="container">

<viewclass='row'>

<inputplaceholder='请输入姓名'bindinput='bindNameInput'/>

</view>

<viewclass='row'>

<inputplaceholder='请输入手机号'bindinput='bindPhoneInput'/>

</view>

<viewclass='row'>

<inputplaceholder='请输验证码'bindinput='bindCodeInput'style='width:70%;'/>

<buttonclass='codeBtn'bindtap='getCode'hidden='{{hidden}}'disabled='{{btnDisabled}}'>{{btnValue}}</button>

</view>

<view>

<buttonclass='save'bindtap='save'>保存</button>

</view>

</view>

index.js//index.js

varzhenzisms=require('../../utils/zhenzisms.js');

//获取应用实例

constapp=getApp();

Page({

data:{

hidden:true,

btnValue:'',

btnDisabled:false,

name:'',

phone:'',

code:'',

second:60

},

onLoad:function(){

},

//姓名输入

bindNameInput(e){

this.setData({

name:e.detail.value

})

},

//手机号输入

bindPhoneInput(e){

console.log(e.detail.value);

varval=e.detail.value;

this.setData({

phone:val

})

if(val!=''){

this.setData({

hidden:false,

btnValue:'获取验证码'

})

}else{

this.setData({

hidden:true

})

}

},

//验证码输入

bindCodeInput(e){

this.setData({

code:e.detail.value

})

},

//获取短信验证码

getCode(e){

console.log('获取验证码');

varthat=this;

zhenzisms.client.init('https://sms_','appId','appSecret');

zhenzisms.client.send(function(res){

if(res.data.code==0){

that.timer();

return;

}

wx.showToast({

title:res.data.data,

icon:'none',

duration:2000

})

},,'验证码为:3322');

},

timer:function(){

letpromise=newPromise((resolve,reject)=>{

letsetTimer=setInterval(

()=>{

varsecond=this.data.second-1;

this.setData({

second:second,

btnValue:second+'秒',

btnDisabled:true

})

if(this.data.second<=0){

this.setData({

second:60,

btnValue:'获取验证码',

btnDisabled:false

})

resolve(setTimer)

}

}

,1000)

})

promise.then((setTimer)=>{

clearInterval(setTimer)

})

},

//保存

save(e){

console.log('姓名:'+);

console.log('手机号:'+this.data.phone);

console.log('验证码:'+this.data.code);

//省略提交过程

}

})

index.wxss/**index.wxss**/

page{

height:100%;

width:100%;

background:linear-gradient(#5681d7,#486ec3);

display:flex;

flex-direction:column;

}

.container{

display:flex;

flex-direction:column;

justify-content:space-around;

width:90%;

margin:50rpxauto;

}

.row{

position:relative;

height:80rpx;

width:100%;

border-radius:10rpx;

background:#fff;

margin-bottom:20rpx;

padding-left:20rpx;

box-sizing:border-box;

}

.rowinput{

width:100%;

height:100%;

}

.codeBtn{

position:absolute;

right:0;

top:0;

color:#bbb;

width:30%;

font-size:26rpx;

height:80rpx;

line-height:8