微信小程序获取验证码

Posted 水星记_

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序获取验证码相关的知识,希望对你有一定的参考价值。

前言

获取验证码的操作在开发中比比皆是,今天用一个简单的小案例教大家如何在微信小程序中实现这个操作。

实现效果:

源码如下:

wxml文件

<view class="codeBox">
  <!-- input框 -->
  <view>
    <input placeholder="请输入验证码" />
  </view>
  <!-- 获取验证码按钮 -->
  <view>
    <text data-id="2" bindtap="getVerificationCode">contantTxt</text>
  </view>
</view>

js文件

var app = getApp(); //获取应用实例
var countDown = null; //自定义一个倒计时的函数
Page(
  data: 
    contantTxt: '获取验证码', //按钮中展示的内容
    countTime: 5, //倒计时的时间
  ,
  // 按钮事件
  getVerificationCode() 
    var that = this; //防止this指向问题
    var countTime = that.data.countTime
    // setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式,简单来说就是定时执行
    countDown = setInterval(function () 
      countTime--; // 倒计时开始递减
      // 更新按钮中的显示内容
      that.setData(
        contantTxt: countTime + ' 秒'
      )
      // 如果倒计时时间小于或者等于0,也就是倒计时结束,显示 “重新发送” 字样
      if (countTime <= 0) 
        clearInterval(countDown); //停止执行countDown函数
        // 更新按钮中的显示内容
        that.setData(
          contantTxt: '重新发送',
          countTime: 5,
        )
      
    , 1000)
  
)

wxss文件

.codeBox 
  /* 最外层的盒子 */
  margin: 50rpx;
  display: flex;
  align-items: center;
  font-size: 12px;


.codeBox view:first-child 
  /* input框外层盒子的样式 */
  width: 70%;


.codeBox view:last-child 
  /* 按钮外层盒子的样式 */
  width: 30%;
  box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
  border: 1px solid rgb(196, 210, 236);
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 60rpx;
  border-bottom-right-radius: 60rpx;
  color: rgb(0, 157, 255);


input 
  /* input框本身的样式 */
  border: 1px solid rgb(196, 210, 236);
  opacity: 0.8;
  box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.16);
  background: #ffffff;
  padding-left: 20rpx;
  height: 80rpx;
  border-top-left-radius: 60rpx;
  border-bottom-left-radius: 60rpx;


button 
  /* 按钮本身的样式 */
  background: none;
  width: 150rpx;
  height: 150rpx;
  display: flex;
  justify-content: center;


button::after 
  /* 去掉按钮点击自带的效果 */
  border: none;


button:hover 
  /* 去掉按钮触摸自带的效果 */
  background: none;

注意:

如果验证码倒计时期间再次点击 “获取验证码” 按钮,依旧会触发该事件,所以需要对此按钮做一个限制,让其在倒计时期间无法被触发,可配合防抖节流函数实现,详情见博主另一篇文章,其中有详细讲解及用法 小程序防抖节流函数封装。

以上是关于微信小程序获取验证码的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序获取验证码倒计时效果

微信小程序手机号授权功能十分钟有效验证码泄露,啥时候安全

微信小程序获取验证码倒计时

微信小程序-----自定义验证码实现

微信小程序-微信支付签名验证

完整且易读的微信小程序的注册页面(包含倒计时验证码获取用户信息)