支付寶小程序發送短信驗證碼完整實例

支付寶小程序註冊完整實例，發送短信驗證碼，帶60秒倒計時功能，無需服務器端。效果圖:

代碼:

index.axml

 

<view class="container">  <view class='row'>
     <input placeholder='請輸入手機號' onInput='bindPhoneInput'/> 
  </view>
  <view class='row'>
     <input placeholder='請輸驗證碼' onInput='bindCodeInput'/> 
     <button class='codeBtn' onTap="getSmsCaptcha" disabled='{{captchaDisabled}}'>{{captchaTxt}}</button>
  </view>
  <view>
     <button class="subBtn" onTap='save'>保存</button>
  </view></view>

　　

index.js

 

var CountDown = require('../../utils/countdown.js');
var zhenzisms = require('../../utils/zhenzisms.js');
Page({
  data: {
    mobile: '',
    code: ''
  },
  onLoad(query) {
    this.countdown = new CountDown(this);
    my.clearStorage();
  },
  //手機號輸入
  bindPhoneInput(e) {
    console.info(e.detail.value);
    var val = e.detail.value;
    this.setData({
      mobile: val
    })
  },
  //驗證碼輸入
  bindCodeInput(e) {
    this.setData({
      code: e.detail.value
    })
  },
  getSmsCaptcha(e) {
    var that = this;
    var mobile = that.data.mobile;
    if(mobile == ''){
      my.showToast({
        type: 'none',
        content: '請輸入手機號碼',
        duration: 3000,
      });
      return ;
    }
    
    that.countdown.start();
    zhenzisms.client.init('https://sms_developer.zhenzikj.com', '你的榛子云appID', '你的榛子云appSecret');
    zhenzisms.client.sendCode(function (res) {
      my.showToast({
        type: 'none',
        content: res.data.data,
        duration: 2000
      })
    }, mobile, '驗證碼爲:{code}', '', 60 * 5, 4);

    //得到餘額
    // zhenzisms.client.balance(function(res){
    //   console.info(res);
    //   console.info('餘額: '+res.data.data)
    // });

    //得到短信詳情
    // zhenzisms.client.findSmsByMessageId(function(res){
    //   console.info(res);
    //   console.info('詳情: '+res.data.data)
    // }, 'aaaabbbbba');

  },
  //保存
  save(e) {
    console.info('手機號: ' + this.data.mobile);
    console.info('驗證碼: ' + this.data.code);

     //檢驗驗證碼
    var result = zhenzisms.client.validateCode(this.data.mobile, this.data.code);
    if (result == 'ok'){
      console.info('驗證正確');
    } else if (result == 'empty'){
      console.info('驗證錯誤, 未生成驗證碼!');
    } else if (result == 'number_error') {
      console.info('驗證錯誤，手機號不一致!');
    } else if (result == 'code_error') {
      console.info('驗證錯誤，驗證碼不一致!');
    } else if (result == 'code_expired') {
      console.info('驗證錯誤，驗證碼已過時!');
    }
  }

});

　　

引入一個本身寫的countdown.js 倒計時的插件。

 

index.acss

 

/**index.wxss**/
page{
  height: 100%;
  width: 100%;
  background: linear-gradient(#5681d7, #486ec3);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 90%;
  padding-top: 50rpx;
}

.row{
  position: relative;
  height: 80rpx;
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  margin: 0 0 50rpx  0;
}
.row input{
  width: 100%;
  height:100%;
  font-size: 24rpx;
  padding: 0;
}
.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;
}

　　

完整demo下載: 下載地址