Rappelez-vous le problème d'écran blanc de l'applet WeChat sur un téléphone Android

hzc

Libérer： 2020-06-23 10:21:53

avant

3148 Les gens l'ont consulté

Lorsque je créais un mini-programme, j'ai vendu un produit à durée limitée et j'ai utilisé un compte à rebours pour cette raison, lorsque j'utilisais le mini-programme sur un téléphone Android, après avoir mis le mini-programme en arrière-plan pour l'exécuter pendant un certain temps. période de temps, après être entré à nouveau dans le mini-programme. Si la page devient vide ou si l'événement de clic échoue, enregistrez-le ici

1. Fichiers de code associés

J'utilise un. composant personnalisé à restituer ici Le fichier wxml du

composant personnalisé référencé en externe

/* limitCommodity是一个数组，返回的是商品对象，包含商品价格、商品结束时间、商品图片等 */
<block wx:for="{{limitCommodity}}" wx:key="{{item.id}}">
    <commodityItem class="specialContent" goods="{{item}}" />
</block>

Copier après la connexion

fichier js du composant personnalisé composant

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
      })
    },
  }
})

Copier après la connexion

2. Cause

Parce que lorsque des composants personnalisés sont introduits en externe, le minuteur est directement appelé Et le L'opération setData est effectuée, ce qui fait que lorsque ce composant est référencé en externe, si la longueur du tableau de produits entrant est grande, la minuterie augmente et l'opération setData continue également d'augmenter
Plus de setData entraînera une plus grande utilisation de la mémoire

3 Méthode d'amélioration

La méthode d'amélioration consiste à réduire les opérations setData

Vous pouvez personnaliser un autre composant pour transmettre l'intégralité du tableau dans
, puis calculer le temps dans le tableau de produits
Fichier js amélioré

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][&#39;endtime_date&#39;] = this.filterTime(limitCommodity[i][&#39;endtime&#39;])
      }
      this.setData({
        limitCommodity
      })
      this.timeOut = setTimeout(()=>{
        this.calculate();
      },1000);
    }
  }
})

Copier après la connexion

L'amélioration consiste à calculer l'heure puis à renvoyer l'heure, tandis que setData est le tableau complet de la liste de produits, donc réduit le nombre de setData fois