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

看效果

由于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
将会显示如下

以上所述是小编给大家介绍的Android中微信小程序支付倒计时功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！