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

2019-12-12 04:12:27

字體：大中小

來源：轉載

供稿：網友

看效果

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

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

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

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

思路：

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

1. 日期轉化成毫秒

2.定義線程動態顯示

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

將會顯示如下