Beispiel für die Implementierung des Skelettbildschirms des WeChat-Applets

Um das Benutzererlebnis zu optimieren, war der Skeleton-Bildschirm schon immer die bevorzugte Anzeigemethode der Entwickler. Es ist eine Anzeigemethode, die den ersten Bildschirm einnimmt und den Betrachter nicht durch lange Wartezeiten beunruhigt. Die Implementierung des Skelettbildschirms im Miniprogramm ist relativ einfach, aber Schüler, die ihn noch nie verwendet haben, werden unweigerlich in die Irre gehen. Heute werde ich die Implementierung des Skelettbildschirms im Miniprogramm vorstellen.

Was ist ein Skelettbildschirm?

Der Skelettbildschirm ist eine leere Version der Seite, die normalerweise grob durch einige graue Blöcke umrissen wird, bevor die Seite vollständig gerendert ist. Nachdem die Daten geladen wurden, werden sie durch den eigentlichen Inhalt ersetzt. Normalerweise müssen wir in einem Miniprogramm den Code des Skelettbildschirms manuell pflegen. Wenn sich das Geschäft ändert, muss auch der Code des Skelettbildschirms angepasst werden. Zur Vereinfachung der Entwicklung bietet das Entwicklertool die Möglichkeit, automatisch einen Bildschirmcode-Skelett zu generieren.

So generieren Sie einen Skelettbildschirm im Applet

WeChat-Entwicklertools können einen Skelettbildschirm für die aktuelle Seite generieren. Der Tool-Einstieg befindet sich bei den drei Punkten in der unteren rechten Ecke des Simulator-Panels.

Einführungsmethode

Der Skelett-Bildschirmcode wird über die Miniprogrammvorlage eingeführt. Am Beispiel der Seiten/Index/Indexseite ist die Einführungsmethode wie folgt.

<!-- Seiten/Index/Index.wxml Importvorlage -->
<import src="index.skeleton.wxml"/>
<template ist="skelett" wx:if="{{wird geladen}}" data="{{}}"/>

/* Stile in Seiten/Index/Index.wxss importieren*/
@import "index.skeleton.wxss";

Einblenden und Ausblenden

Wie bei normalen Vorlagen werden Anzeige und Ausblenden durch wx:if gesteuert.
Sie können eine verzögerte Ladezeit festlegen oder den Skelettbildschirm ausblenden, nachdem alle Datenanforderungen für die Seite erfolgreich waren.
Der Lazy-Loading-Code wird in den onLoad-Lebenszyklus eingefügt. Der Code lautet wie folgt:

   // Daten schrittweise laden und Ladevorgang schrittweise ausblenden
  progressiveLoad() {
    setzeTimeout(() => {
      dies.setData({
        wird geladen: false
      })
    }, 1000)
  },

  beim Laden() {
    this.progressiveLoad() // Daten schrittweise laden und Ladevorgang schrittweise ausblenden
  }

Entwickler können außerdem die Farbe und Form von Text, Bildern und Schaltflächen nach Bedarf festlegen und einige Seitenelemente gemäß Ausschließen, Entfernen, Ausblenden usw. ignorieren oder ausblenden, um bessere Anzeigeeffekte zu erzielen. Die spezifische Konfiguration finden Sie im offiziellen Dokument des Skeleton-Bildschirms

Dies ist das Ende dieses Artikels über das Implementierungsbeispiel des WeChat-Applet-Skelettbildschirms. Weitere relevante Inhalte zum Applet-Skelettbildschirm finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!