当前位置：移动技术网 > 移动技术>移动开发>Android > Android中微信小程序支付倒计时功能

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

2019年07月24日 | 移动技术网移动技术 | 我要评论

看效果

由于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

将会显示如下