支付宝小程序发送短信验证码完整实例

支付宝小程序注册完整实例，发送短信验证码，带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下载: 下载地址

 

转载于:https://www.cnblogs.com/seeto/p/10858614.html