Heim > WeChat-Applet > Mini-Programmentwicklung > Erinnern Sie sich an das Problem mit dem weißen Bildschirm des WeChat-Applets auf Android-Telefonen

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

hzc
Freigeben: 2020-06-23 10:21:53
nach vorne
3156 Leute haben es durchsucht
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>
Nach dem Login kopieren
  • 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
      })
    },
  }
})
Nach dem Login kopieren

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);
    }
  }
})
Nach dem Login kopieren
  • 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!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage