Erinnern Sie sich an das Problem mit dem weißen Bildschirm des WeChat-Applets auf Android-Telefonen

Als ich ein Miniprogramm erstellte, verkaufte ich ein zeitlich begrenztes Produkt und verwendete aus diesem Grund einen Countdown, wenn ich das Miniprogramm auf einem Android-Telefon verwendete, nachdem ich das Miniprogramm für die Ausführung in den Hintergrund gestellt hatte Zeitspanne nach dem erneuten Aufrufen des Miniprogramms. Wenn die Seite leer wird oder das Klickereignis fehlschlägt, notieren Sie es hier

1 Zugehörige Codedateien

Ich verwende a Benutzerdefinierte Komponente, die hier gerendert werden soll Die WXML-Datei der

• extern referenzierten benutzerdefinierten Komponente

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

• js-Datei der benutzerdefinierten Komponente Komponente

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. Ursache

• Denn wenn benutzerdefinierte Komponenten extern eingeführt werden, wird der Timer direkt aufgerufen Die setData-Operation wird ausgeführt, was dazu führt, dass bei externem Verweis auf diese Komponente die Länge des eingehenden Produktarrays groß ist, der Timer zunimmt und die setData-Operation ebenfalls weiter zunimmt
• Mehr setData führt zu einer höheren Speichernutzung

3. Verbesserungsmethode

Die Verbesserungsmethode besteht darin, setData-Operationen zu reduzieren

• Sie können eine andere Komponente anpassen, um das gesamte Array an
• zu übergeben und dann die Zeit im Produktarray
• zu berechnen Verbesserte js-Datei

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

• Die Verbesserung besteht darin, die Zeit zu berechnen und dann die Zeit zurückzugeben, während setData das gesamte Produktlistenarray ist, sodass die Anzahl der setData reduziert wurde mal

Ich lerne fleißig. Wenn es für Ihr Studium hilfreich ist, hinterlassen Sie bitte Ihre Markierung (Gefällt mir^_^)

Empfohlenes Tutorial: " WeChat Mini-Programm"

Das obige ist der detaillierte Inhalt vonErinnern Sie sich an das Problem mit dem weißen Bildschirm des WeChat-Applets auf Android-Telefonen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!