美文网首页
微信小程序验证码倒计时60秒提醒功能实现

微信小程序验证码倒计时60秒提醒功能实现

作者: 趙小傑 | 来源:发表于2019-06-18 22:04 被阅读0次

    微信小程序验证码倒计时60秒提醒功能实现

    问题
    需求: 焙烤小程序有一个获取短信验证码倒计时60秒再次获取的功能。

    迁移到登陆验证码获取,需要有倒计时功能,app使用到setTimeout ,出问题了?!死活递归调用不了

    image.png

    实现

    发现了setInterval倒计时,成功运行代码如下

    <!--index.wxml-->
    <view class="container">
      <view class="userinfo">
        <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
        <block wx:else>
          <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
          <text class="userinfo-nickname">{{userInfo.nickName}}</text>
        </block>
      </view>
     <!--验证码按钮 S-->
      <view class="usermotto">
          <button bindtap='sendSms' disabled='{{snsDisabled}}'>{{snsCodeMsg}}</button>
      </view>
       <!--验证码按钮 E-->
    </view>
    
    
    //index.js
    //获取应用实例
    const app = getApp()
    
    Page({
      data: {
        snsCodeMsg: '获取验证码',//默认字
        snsMsgWait:60,//时间秒
        snsDisabled:false,//是否可点击
        userInfo: {},
        hasUserInfo: false,
        canIUse: wx.canIUse('button.open-type.getUserInfo')
      },
      //事件处理函数
      bindViewTap: function() {
        wx.navigateTo({
          url: '../logs/logs'
        })
      },
      onLoad: function () {
        if (app.globalData.userInfo) {
          this.setData({
            userInfo: app.globalData.userInfo,
            hasUserInfo: true
          })
        } else if (this.data.canIUse){
          // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
          // 所以此处加入 callback 以防止这种情况
          app.userInfoReadyCallback = res => {
            this.setData({
              userInfo: res.userInfo,
              hasUserInfo: true
            })
          }
        } else {
          // 在没有 open-type=getUserInfo 版本的兼容处理
          wx.getUserInfo({
            success: res => {
              app.globalData.userInfo = res.userInfo
              this.setData({
                userInfo: res.userInfo,
                hasUserInfo: true
              })
            }
          })
        }
      },
      getUserInfo: function(e) {
        console.log(e)
        app.globalData.userInfo = e.detail.userInfo
        this.setData({
          userInfo: e.detail.userInfo,
          hasUserInfo: true
        })
      },
      /**
       * 验证码发送
       */
      sendSms:function(){
        // 60秒后重新获取验证码
        var inter = setInterval(function () {
          this.setData({
            snsCodeMsg: "重新发送(" + this.data.snsMsgWait + ")",
            snsMsgWait: this.data.snsMsgWait - 1,
            snsDisabled:true
          });
          if (this.data.snsMsgWait < 0) {
            clearInterval(inter)
            this.setData({
              snsCodeMsg: "获取验证码",
              snsMsgWait: 60,
              snsDisabled: false
            });
          }
        }.bind(this), 1000);
        //注意后面的bind绑定,最关键。不然又是未定义,无法使用外围的变量
    
      }
    })
    

    运行效果

    image.png

    源码地址

    相关文章

      网友评论

          本文标题:微信小程序验证码倒计时60秒提醒功能实现

          本文链接:https://www.haomeiwen.com/subject/rwtcqctx.html