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

看效果

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

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

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

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

思路：

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

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

                            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

将会显示如下

以上所述是小编给大家介绍的Android中微信小程序支付倒计时功能网站的支持！

来源：http://blog.csdn.net/zhaoyazhi2129/article/details/53885301