热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

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

大家在使用微信的时候都注意过微信支付倒计时功能,怎么实现的呢?今天小编给大家分享微信小程序支付倒计时功能实现思路详解,一起看看吧

看效果

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

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

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

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

思路:

  1. onLoad:function(options)调用倒计时方法函数
  2. 定义线程进行数据动态现实

                            1. 日期转化成毫秒

                             2.定义线程动态显示

                             3.渲染倒计时

                                                 1.毫秒转成固定格式

                                                 2. 处理分秒位数不足的补0

看代码了

wxml:

 
  
 支付剩余时间: 
 {{clock}}  
 

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 &#63; "0" + num : num 
 } 
}) 

tip:

如果不进行位数补0

将会显示如下

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


推荐阅读
  • 微信小程序导航跟随的实现方法
    本文介绍了在微信小程序中实现导航跟随的方法。通过设置导航的position属性和绑定滚动事件,可以实现页面向下滚动到导航位置时,导航固定在页面最上方;页面向上滚动到导航位置时,导航恢复到原始位置;点击导航可以平滑跳转到相应位置。代码示例也给出了具体实现方法。 ... [详细]
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • 本文讲述了如何通过代码在Android中更改Recycler视图项的背景颜色。通过在onBindViewHolder方法中设置条件判断,可以实现根据条件改变背景颜色的效果。同时,还介绍了如何修改底部边框颜色以及提供了RecyclerView Fragment layout.xml和项目布局文件的示例代码。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • Android系统移植与调试之如何修改Android设备状态条上音量加减键在横竖屏切换的时候的显示于隐藏
    本文介绍了如何修改Android设备状态条上音量加减键在横竖屏切换时的显示与隐藏。通过修改系统文件system_bar.xml实现了该功能,并分享了解决思路和经验。 ... [详细]
  • 本文介绍了Android 7的学习笔记总结,包括最新的移动架构视频、大厂安卓面试真题和项目实战源码讲义。同时还分享了开源的完整内容,并提醒读者在使用FileProvider适配时要注意不同模块的AndroidManfiest.xml中配置的xml文件名必须不同,否则会出现问题。 ... [详细]
  • 本文是关于自学Android的笔记,包括查看类的源码的方法,活动注册的必要性以及布局练习的重要性。通过学习本文,读者可以了解到在自学Android过程中的一些关键点和注意事项。 ... [详细]
  • 微信答题小程序的设计与实现详解
    本文详细介绍了如何设计和实现一个微信答题小程序,包括题库的设计和题目的呈现。通过抽取题目编号和使用全局变量记录当前题目的信息,实现了题目的刷新和显示。同时,还介绍了题目的展示方式和容器的创建。本文适合零基础的小白学习微信答题小程序的开发。 ... [详细]
  • 微信民众号商城/小顺序商城开源项目介绍及使用教程
    本文介绍了一个基于WeiPHP5.0开发的微信民众号商城/小顺序商城的开源项目,包括前端和后端的目录结构,以及所使用的技术栈。同时提供了项目的运行和打包方法,并分享了一些调试和开发经验。最后还附上了在线预览和GitHub商城源码的链接,以及加入前端交流QQ群的方式。 ... [详细]
  • android 触屏处理流程,android触摸事件处理流程 ? FOOKWOOD「建议收藏」
    android触屏处理流程,android触摸事件处理流程?FOOKWOOD「建议收藏」最近在工作中,经常需要处理触摸事件,但是有时候会出现一些奇怪的bug,比如有时候会检测不到A ... [详细]
  • 14亿人的大项目,腾讯云数据库拿下!
    全国人 ... [详细]
  • 起因由于我录制过一个小程序的课程,里面有消息模板的讲解。最近有几位同学反馈官方要取消消息模板,使用订阅消息。为了方便大家容易学 PythonFlask构建微信小程序订餐系统 课程。 ... [详细]
  • 使用flex弹性布局来为微信小程序写自适应页面
    我们知道,写习惯了前端的人,一般切图后布局页面的话,上手最习惯的是基于盒子模型的浮动布局,依赖display属性positi ... [详细]
  • PHP小习题:PHP小练习题前几天在百度知道里面看到有位网友询问如何制作一下的小程序:用php语言设计一个小程序,计算今天到达下月的天数、全部输出这些天数,并使得每天的日期以三种颜 ... [详细]
author-avatar
mobiledu2502884523
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有