首页 > 系统 > Android > 正文

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

2019-12-12 04:12:27
字体:
来源:转载
供稿:网友

看效果

由于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中微信小程序支付倒计时功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表