微信小程序 支付倒计时

看效果

由于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.jsvar 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  }})