微信小程序之支付倒计时

支付倒计时

转载来源：http://www.wxapp-union.com/portal.php?mod=view&aid=890

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

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

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

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

思路：

1. onLoad:function(options)调用倒计时方法函数
2. 定义线程进行数据动态现实
   1. 日期转化成毫秒
   2. 定义线程动态显示
      
   3. 渲染倒计时
      1. 毫秒转成固定格式
      2. 处理分秒位数不足的补0
         

看代码了

wxml：

1. <view class="pay_time">
2. <image src="{{imgUrls_pay_time}}"></image>
3. <text>支付剩余时间：</text>
4. <text>{{clock}} </text>
5. </view>

wxjs：

1. // pages/order/take_order/pay/pay.js
2. var app = getApp()
3. Page({
4. data: {
5. imgUrls_pay_time: '/image/icon_orderstatus_countdown.png',
6. "productName": "",
7. "productPrice": "",
8. "payDetail": [],
9. "wxPayMoneyDesc": "",
10. "expireTime": "",
11. clock: ''
12. },
13. onLoad: function (options) {
14. // 页面初始化 options为页面跳转所带来的参数
15. new app.WeToast()
16. var that = this;
17. that.count_down();
19. },
21. onReady: function () {
22. // 页面渲染完成
23. },
24. onShow: function () {
25. // 页面显示
26. },
27. onHide: function () {
28. // 页面隐藏
29. },
30. onUnload: function () {
31. // 页面关闭
32. },
33. /* 毫秒级倒计时 */
34. count_down: function () {
35. var that = this
36. //2016-12-27 12