Android中微信小程序支付倒計時功能

更新時間：2016年12月26日 16:35:35 作者：莫蘭迪不會沒有瓶子

大家在使用微信的時候都注意過微信支付倒計時功能，怎么實現的呢？今天小編給大家分享微信小程序支付倒計時功能實現思路詳解，一起看看吧

看效果

由于web 經驗弱爆- - 一開始我的思路是找事件，但是看了半天API 基本都是點擊觸摸，通過物理觸發(fā)- -

我居然忽略了生命周期，生命周期+線程不就完全OK嗎～

事實證明，線程還是王道啊，一開始就應該這么搞嘛～

度娘上面也看了很多都是用js寫的，but，可能剛做沒幾天吧，我對js與微信小程序掌握還不夠熟練

思路：

onLoad:function(options)調用倒計時方法函數
定義線程進行數據動態(tài)現實

1. 日期轉化成毫秒

2.定義線程動態(tài)顯示

3.渲染倒計時

1.毫秒轉成固定格式

2. 處理分秒位數不足的補0

看代碼了

wxml:

<view class="pay_time"> 
 <image src="{{imgUrls_pay_time}}"></image> 
 <text>支付剩余時間：</text> 
 <text>{{clock}} </text> 
</view>

wxjs:

// pages/order/take_order/pay/pay.js 
var app = getApp() 
Page({ 
 data: { 
  imgUrls_pay_time: '/image/icon_orderstatus_countdown.png', 
  "productName": "", 
  "productPrice": "", 
  "payDetail": [], 
  "wxPayMoneyDesc": "", 
  "expireTime": "", 
  clock: '' 
 }, 
 onLoad: function (options) { 
  // 頁面初始化 options為頁面跳轉所帶來的參數 
  new app.WeToast() 
  var that = this; 
  that.count_down(); 
 }, 
 onReady: function () { 
  // 頁面渲染完成 
 }, 
 onShow: function () { 
  // 頁面顯示 
 }, 
 onHide: function () { 
  // 頁面隱藏 
 }, 
 onUnload: function () { 
  // 頁面關閉 
 }, 
 /* 毫秒級倒計時 */ 
 count_down: function () { 
  var that = this 
  //2016-12-27 12:47:08 轉換日期格式 
  var a = that.data.expireTime.split(/[^0-9]/); 
  //截止日期：日期轉毫秒 
  var expireMs = new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]); 
  //倒計時毫秒 
  var duringMs = expireMs.getTime() - (new Date()).getTime(); 
  // 渲染倒計時時鐘 
  that.setData({ 
   clock: that.date_format(duringMs) 
  }); 
  if (duringMs <= 0) { 
   that.setData({ 
    clock: "支付已截止，請重新下單" 
   }); 
   // timeout則跳出遞歸 
   return; 
  } 
  setTimeout(function () { 
   // 放在最后-- 
   duringMs -= 10; 
   that.count_down(); 
  } 
   , 10) 
 }, 
  /* 格式化倒計時 */ 
 date_format: function (micro_second) { 
  var that = this 
  // 秒數 
  var second = Math.floor(micro_second / 1000); 
  // 小時位 
  var hr = Math.floor(second / 3600); 
  // 分鐘位 
  var min = that.fill_zero_prefix(Math.floor((second - hr * 3600) / 60)); 
  // 秒位 
  var sec = fill_zero_prefix(second % 60);// equal to => var sec = second % 60; 
  return hr + ":" + min + ":" + sec + " "; 
 }, 
 /* 分秒位數補0 */ 
 fill_zero_prefix: function (num) { 
  return num < 10 ? "0" + num : num 
 } 
})

tip:

如果不進行位數補0

將會顯示如下