微信小程序发送验证码倒计时,刷新页面后倒计时重新开始的问题

微信小程序发送验证码倒计时的页面,和输入手机号的页面是两个独立的页面时.

返回输入手机号页,再进入发送验证码页时,倒计时会重新开始计时.

 

 

 

 

可以将倒计时函数放入app.js ,在倒计时页面中定时获取全局变量中的参数,

一定要用setData将获取到的倒计时时间等数据,设置到data中,否则页面不会重新渲染.

 

app.js:

/**
   * 发送验证码
   */
  dongtai:function(){
    var that=this;
    // 获取总秒数
    var seconds=this.globalData.max_seconds;
    // 显示倒计时
    this.globalData.send=false;
    // 设置秒数
    this.globalData.seconds=seconds;
    // 设置定时器
    var t=setInterval(function(){
      // 如果秒数小于0
      if(seconds<=0){
        // 停止定时器
        clearInterval(t);
        // 显示发送按钮
        that.globalData.send=true;
        // 停止执行
        return;
      }
      // 秒数减一
      seconds--;
      // 更新当前秒数
      that.globalData.seconds=seconds;
      console.log(that.globalData.seconds)
    },1000)
  },

globalData: {

    // 发送验证码按钮显示
    send:true,
    // 当前倒计时秒数
    seconds:"",
    // 总秒数
    max_seconds:59,

　　　　// 注册验证手机号

    　　register_phone:"",

  },

 

显示倒计时的页面:

wxml:

　　　　　<view class="dongtai_right" bindtap="dongtai" wx:if="{{send}}">
          <text>发送动态码</text>
        </view>
        <view class="dongtai_right seconds" wx:else>
          <text>{{seconds}}s</text>
        </view>

 

 js:

 

const app=getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 发送按钮显示
    send:app.globalData.send,
    // 当前倒计时秒数
    seconds:app.globalData.seconds,
    // 总秒数
    max_seconds:app.globalData.max_seconds,
    // 手机号
    phone:"",
    // 获取倒计时秒数定时器
    time:'',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this;
    // 如果当前倒计时是停止状态
    if(!app.globalData.seconds){
      // 开始倒计时
      app.dongtai();
      // 存储显示的电话号
      app.globalData.register_phone=options.phone;
    }
    // 显示验证手机号
    this.setData({
      phone:app.globalData.register_phone,
    })
    
    console.log(options)
    
    
  },
  /**
   * 点击发送动态码按钮
   */
  dongtai:function(){
    console.log(app)
    // 调用倒计时
    app.dongtai();
    // 获取倒计时秒数
    this.listen();
  },
  // 监听全局倒计时秒数
  listen:function(){
    var that=this;
    // 定时查询倒计时数据
    var time=setInterval(function(){
      that.setData({
        // 发送按钮显示
        send:app.globalData.send,
        // 当前倒计时秒数
        seconds:app.globalData.seconds,
        // 总秒数
        max_seconds:app.globalData.max_seconds,
      })
      // 倒计时结束停止定时获取
      if(app.globalData.send){
        clearInterval(time);
      }
      console.log('time')
    },200)
    // 存储定时器,便于清除
    that.setData({
      time:time,
    })
  },
  
  


  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.listen();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    // 暂停获取倒计时数据
    clearInterval(this.data.time);
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    // 暂停获取倒计时数据
    clearInterval(this.data.time);
  },
})