微信小程序發送驗證碼倒計時,刷新頁面后倒計時重新開始的問題

微信小程序發送驗證碼倒計時的頁面,和輸入手機號的頁面是兩個獨立的頁面時.

返回輸入手機號頁,再進入發送驗證碼頁時,倒計時會重新開始計時.

 

 

 

 

可以將倒計時函數放入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);
  },
})