微信小程序注冊(cè)完整實(shí)例，發(fā)送短信驗(yàn)證碼，帶60秒倒計(jì)時(shí)功能，無需服務(wù)器端。效果圖:

代碼:

index.wxml

<!--index.wxml--><view class="container"> <view class='row'>   <input placeholder='請(qǐng)輸入姓名' bindinput='bindNameInput'/>  </view>  <view class='row'>   <input placeholder='請(qǐng)輸入手機(jī)號(hào)' bindinput='bindPhoneInput'/>  </view> <view class='row'>   <input placeholder='請(qǐng)輸驗(yàn)證碼' bindinput='bindCodeInput' style='width:70%;'/>    <button class='codeBtn' bindtap='getCode' hidden='{{hidden}}' disabled='{{btnDisabled}}'>{{btnValue}}</button> </view> <view>   <button class='save' bindtap='save' >保存</button> </view> </view>

index.js

//index.jsvar zhenzisms = require('../../utils/zhenzisms.js');//獲取應(yīng)用實(shí)例const app = getApp(); Page({ data: {  hidden: true,  btnValue:'',  btnDisabled:false,  name: '',  phone: '',  code: '',  second: 60 }, onLoad: function () {   }, //姓名輸入 bindNameInput(e) {  this.setData({   name: e.detail.value  }) }, //手機(jī)號(hào)輸入 bindPhoneInput(e) {  console.log(e.detail.value);  var val = e.detail.value;  this.setData({   phone: val  })  if(val != ''){   this.setData({    hidden: false,    btnValue: '獲取驗(yàn)證碼'   })  }else{   this.setData({    hidden: true   })  } }, //驗(yàn)證碼輸入 bindCodeInput(e) {  this.setData({   code: e.detail.value  }) }, //獲取短信驗(yàn)證碼 getCode(e) {  console.log('獲取驗(yàn)證碼');  var that = this;  zhenzisms.client.init('https://sms_developer.zhenzikj.com', '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   })  }, '15801636347', '驗(yàn)證碼為:3322');   }, timer: function () {  let promise = new Promise((resolve, reject) => {   let setTimer = setInterval(    () => {     var second = this.data.second - 1;     this.setData({      second: second,      btnValue: second+'秒',      btnDisabled: true     })     if (this.data.second <= 0) {      this.setData({       second: 60,       btnValue: '獲取驗(yàn)證碼',       btnDisabled: false      })      resolve(setTimer)     }    }    , 1000)  })  promise.then((setTimer) => {   clearInterval(setTimer)  }) }, //保存 save(e) {  console.log('姓名: ' + this.data.name);  console.log('手機(jī)號(hào): ' + this.data.phone);  console.log('驗(yàn)證碼: ' + 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: 50rpx auto;} .row{ position: relative; height: 80rpx; width: 100%; border-radius: 10rpx; background: #fff; margin-bottom: 20rpx; padding-left: 20rpx; box-sizing: border-box;}.row input{ width: 100%; height:100%;}.codeBtn{ position: absolute; right: 0; top: 0; color: #bbb; width: 30%; font-size: 26rpx; height: 80rpx; line-height: 80rpx;}.subBtn{ width: 200rpx; height: 80rpx; background: #fff; color: #000; border-radius: 50rpx; line-height: 80rpx;}