微信开发

    做小程序时，使用了限时产品销售，并且使用了倒计时。 因此，在Android手机上使用applet时，将applet置于后台并运行一段时间后，再次进入applet后出现页面白屏或者点击事件失效的情况，这里记录下

    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.引起的原因

    因为在外部引入自定义的组件时，直接就是调用了定时器并且进行了setData操作，这就导致了当在外部引用这个组件时，如果传入的商品数组长度较大时，定时器增多的同时，setData操作也不断的增多

    setData多了就会导致内存占用多

    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的次数