Android中微信小程序支付倒计时功能

看效果

由于web 经验弱爆- -  一开始我的思路是找事件，但是看了半天API 基本都是点击触摸，通过物理触发- -

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

事实证明，线程还是王道啊，一开始就应该这么搞嘛～

度娘上面也看了很多都是用js写的，but，可能刚做没几天吧，我对js与微信小程序掌握还不够熟练

思路：

onLoad:function(options)调用倒计时方法函数

定义线程进行数据动态现实

                            1. 日期转化成毫秒

                             2.定义线程动态显示

                             3.渲染倒计时

                                                 1.毫秒转成固定格式

                                                 2. 处理分秒位数不足的补0

看代码了

wxml:

 
 支付剩余时间：
 {{clock}} 

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  var sec = second % 60;
  return hr + ":" + min + ":" + sec + " ";
 },
 /* 分秒位数补0 */
 fill_zero_prefix: function (num) {
  return num 
   
tip:
如果不进行位数补0
将会显示如下
以上所述是小编给大家介绍的Android中微信小程序支付倒计时功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对PHP中文网的支持！
更多Android中微信小程序支付倒计时功能相关文章请关注PHP中文网！