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

 更新时间:2016年12月26日 16:35:35   作者:莫兰迪不会没有瓶子  
大家在使用微信的时候都注意过微信支付倒计时功能,怎么实现的呢?今天小编给大家分享微信小程序支付倒计时功能实现思路详解,一起看看吧

看效果

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

相关文章

  • 基于Android自定义控件实现雷达效果

    基于Android自定义控件实现雷达效果

    这篇文章主要为大家详细介绍了基于Android自定义控件实现雷达效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Android自定义圆环倒计时控件

    Android自定义圆环倒计时控件

    这篇文章主要为大家详细介绍了Android自定义圆环倒计时控件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • Android监听键盘状态获取键盘高度的实现方法

    Android监听键盘状态获取键盘高度的实现方法

    这篇文章主要给大家介绍了关于Android监听键盘状态获取键盘高度的实现方法,文中通过示例代码介绍的非常详细,对各位Android开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-12-12
  • Android Toast提示封装实例代码

    Android Toast提示封装实例代码

    这篇文章主要介绍了Android Toast提示封装实例代码的相关资料,需要的朋友可以参考下
    2017-06-06
  • Android SharedPreferences性能瓶颈解析

    Android SharedPreferences性能瓶颈解析

    这篇文章主要为大家介绍了Android SharedPreferences性能瓶颈解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • Android实现加载广告图片和倒计时的开屏布局

    Android实现加载广告图片和倒计时的开屏布局

    这篇文章主要介绍了Android实现加载广告图片和倒计时的开屏布局,需要的朋友可以参考下
    2014-07-07
  • 解析android中ProgressBar的用法

    解析android中ProgressBar的用法

    本篇文章是对android中ProgressBar的使用进行了详细的分析介绍,需要的朋友参考下
    2013-06-06
  • Android使用AlarmManager设置闹钟功能

    Android使用AlarmManager设置闹钟功能

    这篇文章主要为大家详细介绍了Android使用AlarmManager设置闹钟功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • Android中设置WebView禁止缩放网页的步骤

    Android中设置WebView禁止缩放网页的步骤

    在Android中如果你想要禁止WebView缩放网页,可以通过设置WebView的一些属性来实现,这篇文章主要给大家介绍了关于Android中设置WebView禁止缩放网页的步骤,需要的朋友可以参考下
    2024-05-05
  • Android编程设置TextView颜色setTextColor用法实例

    Android编程设置TextView颜色setTextColor用法实例

    这篇文章主要介绍了Android编程设置TextView颜色setTextColor用法,结合实例形式分析了Android设置TextView颜色setTextColor、ColorStateList等方法的使用技巧与布局文件的设置方法,需要的朋友可以参考下
    2016-01-01

最新评论