全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[乌海seo公司选择久澳]记一次微信小程序在安卓手机上的白屏问题

  

在做小程序的时候,做到了一个限时商品售卖=…◁◇,用到了倒计时,因为这个原因导致了安卓手机上使用小程序时,将小程序放入后台运行一段时间后,再次进入小程序后出现了页面白屏或者点击事件失效的情况☆◇,这里记录下

1★●.相关代码文件

我这里是使用了自定义组件的形式来渲染的
  • 外部的引用的自定义组件的wxml文件
/* limitCommodity是一个数组,返回的是商品对象◁△,包含商品价格、井冈山市小程序制作公司商品结束时间、商品图片等 */
<block wx▽△•:for="○◁;{{limitCommodity}}"◇▷; wx:key="{{item•▼◇▲.id}}"■…;>
 <commodityItem class="specialContent"••…▲; goods="◁▲•;{{item}}" />●△▪;
<▽▽;/block>▲•▽;
  • 自定义组件的js文件
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
 })
 },
 }
})

2.引起的原因

3.改进方法

改进方法就是减少setData操作
  • 可以再自定义一个组件,用于将整个数组传入
  • 然后对商品数组里的时间先进行计算
  • 改进后的js文件
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)□◇;
 }
 }
})
  • 改进就是计算时间后再返回时间,而setData的是整个商品列表数组▷▷□○,这样就减少了setData次数
正在努力学习中☆▷△•,若对你的学习有帮助,留下你的印记呗(点个赞咯^_^)

 

  推荐教程●▼★◆:《微信小程序》

  以上就是记一次微信小程序在安卓手机上的白屏问题的详细内容★-•☆,[乌海seo公司选择久澳]更多请关注久澳传媒编程栏目其它相关文章▲▼!

[乌海seo公司选择久澳]记一次微信小程序在安卓手机上的白屏问题

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。