When I was making a mini program, I sold a limited-time product and used a countdown. Because of this reason, when using the mini program on an Android phone, after putting the mini program in the background to run for a period of time, after entering the mini program again When the page goes blank or the click event fails, record it here
I use a custom component to render here The
/* limitCommodity是一个数组,返回的是商品对象,包含商品价格、商品结束时间、商品图片等 */ <block wx:for="{{limitCommodity}}" wx:key="{{item.id}}"> <commodityItem class="specialContent" goods="{{item}}" /> </block>
Component({ properties: { goods: Object }, data: { }, timer: null, /* 在组件实例进入页面节点树时执行,开始定时器 */ attached: function() { if(this.timer) { clearInterval(this.timer); } this.filterTime(); let that = this; this.timer = setInterval(function () { that.filterTime(); }, 1000) }, /* 在组件实例被从页面节点树移除时执行,将定时器清除 */ detached: function() { clearInterval(this.timer); this.timer = null; }, methods: { /* 用于将时间戳转换成自定义的时间格式 */ filterTime() { let totalTime = new Date(parseInt(this.data.goods.endtime) * 1000) - new Date(); let days = parseInt(totalTime / 1000 / 60 / 60 / 24, 10); let hours = parseInt(totalTime / 1000 / 60 / 60 % 24, 10); let minutes = parseInt(totalTime / 1000 / 60 % 60, 10); let seconds = parseInt(totalTime / 1000 % 60, 10); let day = days >= 10 ? days : '0' + days; day = day == 0 ? '' : day + '天'; let hour = hours >= 10 ? hours : '0' + hours; let minute = minutes >= 10 ? minutes : '0' + minutes; let second = seconds >= 10 ? seconds : '0' + seconds; this.setData({ limitTime: day + hour + ":" + minute + ":" + second }) }, } })
The improvement method is to reduce setData operations
Component({ properties: { limitCommodity:Array }, data: { }, timeOut:null, /* 在组件实例进入页面节点树时执行 */ attached(){ this.calculate(); }, /* 在组件实例被从页面节点树移除时执行,将定时器清除 */ detached(){ clearTimeout(this.timeOut); this.timeOut = null; }, methods: { filterTime(endtime) { let totalTime = new Date(parseInt(endtime) * 1000) - new Date(); let days = parseInt(totalTime / 1000 / 60 / 60 / 24, 10); let hours = parseInt(totalTime / 1000 / 60 / 60 % 24, 10); let minutes = parseInt(totalTime / 1000 / 60 % 60, 10); let seconds = parseInt(totalTime / 1000 % 60, 10); let day = days >= 10 ? days : '0' + days; day = day == 0 ? '' : day + '天'; let hour = hours >= 10 ? hours : '0' + hours; let minute = minutes >= 10 ? minutes : '0' + minutes; let second = seconds >= 10 ? seconds : '0' + seconds; return day + hour + ":" + minute + ":" + second }, calculate(){ let limitCommodity = this.data.limitCommodity; for (let i = 0; i < limitCommodity.length;i++){ limitCommodity[i]['endtime_date'] = this.filterTime(limitCommodity[i]['endtime']) } this.setData({ limitCommodity }) this.timeOut = setTimeout(()=>{ this.calculate(); },1000); } } })
I am studying hard. If it is helpful to your study, please leave your mark (like it ^_^)
Recommended tutorial: "WeChat Mini Program"
The above is the detailed content of Remember the white screen problem of WeChat applet on Android phone. For more information, please follow other related articles on the PHP Chinese website!