Meiner Erfahrung nach kennen die meisten Studierenden dieses Konzept. Wenn du nicht viel weißt, musst du wissen, dass der Browser ein Onload-Event auslöst, wenn eine Webseite geladen wird, und wir verwenden normalerweise die Methode $(document).load() in window.onload oder jquery, um zu definieren, was eine Webseite beim Laden tun soll.
In einer APP ist diese Art von Ereignis reichhaltiger. Oft muss man etwas für Nutzer tun, bevor sie die Seite sehen, am häufigsten ist das Abrufen von Daten vom Server; Oder sie tun etwas, wenn sie kurz davor sind, eine Seite zu verlassen.
1. Verstehen Sie den ionischen Lebenszyklus-Haken
Seit Ionic 3.8.0 bietet das Framework 8 Hook-Funktionen, die in verschiedenen Phasen des Seitenlebenszyklus ausgelöst werden.
1.1 ionViewDidLoad
Der Seitenlade-Abschluss-Trigger bezeichnet hier "Laden abgeschlossen" den Zustand der Seite, in dem die erforderlichen Ressourcen geladen wurden, aber noch nicht in den Zustand der Seite eingegeben sind (der Benutzer sieht noch die vorherige Seite).
Es sollte beachtet werden, dass es sich um einen sehr arroganten Hook handelt, der im gesamten Prozess nur einmal aufgerufen wird, das heißt, er wird aufgerufen, wenn man die Seite zum ersten Mal betritt, und danach, egal wie man ein- und austritt, ist sie verlassen und unglücklich. Außer du schaltest den Hintergrund aus und gibst die Software erneut ein (es ist auch in Ordnung, beim Debuggen der Webseite auf Aktualisieren zu drücken).
Daher eignet sich dieser Hook für einmalige Verarbeitung, wie das Ziehen von Benutzerdaten vom Server und das Ablegen im Cache.
1.2 ionViewWillEnter
Das wörtliche Verständnis ist der Moment: "Ich komme rein", wenn die Seite einfach zu wechseln beginnt. Du kannst die Seitendaten an diesem Punkt vorverarbeiten, und dieser Hook wird jedes Mal aufgerufen.
1.3 ionViewDidEnter
Wenn dieser Hook ausgelöst wird, hat der Benutzer eine neue Seite eingegeben (die Seite ist aktiv), und sie wird jedes Mal aufgerufen.
Apropos, ich muss einfügen: Die Benennung von Hooks durch Ionic ist für die Mehrheit der chinesischen Schüler sehr freundlich, und One wird das Problem lösen und einer HAT das Problem gelöst. Im Gegensatz zu einigen glamourösen (falschen) Frameworks draußen gibt es viele Ready-, Update-, Complied-, Destory-Strukturen usw., die man einmal erinnert und einmal vergisst. (Natürlich ist das ein Scherz, die Benennung der Komponenten hängt eng mit dem Funktionsmechanismus des Frameworks zusammen.)
1.4 ionViewWillLeave
Page Ready (steht kurz davor) wird ausgelöst, wenn der Nutzer gerade den Zurück-Button oder ein verwandtes Ereignis ausgelöst hat.
1.5 ionViewDidLeave
Ausgelöst, wenn die Seite fertig ist, ist sie inaktiv.
1.6 ionViewWillUnload
Triggert, wenn eine Ressource auf einer Seite kurz vor der Zerstörung steht – würdest du vermuten, dass dieser Hook, wie ionViewDidLoad, nur einmal ausgelöst wird?
1.7 Tests
Nehmen wir die Seite, die wir im vorherigen Abschnitt erstellt haben, und machen einen Test zum Laden des Hooks.
Im vorherigen Abschnitt haben wir den Prozess implementiert, von HomePage zu TestPage über Buttons zu springen, und jetzt fügen wir die oben genannten sechs Hooks zu TestPage hinzu und beobachten deren Aufruf über die Konsole.
Der Seitenthema-Abschnittscode ist wie folgt
Beachte, dass ich auch eine Testanweisung zum Konstruktor hinzugefügt habe. Serve Debugging öffnen, auf den Button klicken, zu TestPage gehen und beobachten, was die Konsole ausgibt.
Erstes Mal auf der Seite
Geh zurück zur Startseite und beobachte, was die Konsole ausgibt.
Zum ersten Mal die Seite verlassen
Geben Sie die TestPage erneut ein und verlassen Sie es erneut und beobachten, was die Konsole ausgibt.
Zweite Einfahrt und Ausfahrt
Folgende Schlussfolgerungen lassen sich ziehen:
- Der Konstruktor wird vor ionViewDidLoad gestartet
- ionViewDidLoad wird nur ausgelöst, wenn du die Seite zum ersten Mal betrittst
- ionViewWillUnload wird nach jedem Verlassen der Seite ausgelöst
2. Es gibt außerdem zwei Guard Hooks
Ich erwähnte am Anfang, dass Ionic 8 Haken bietet, während ich nur 6 eingeführt habe. Die ersten 6 Hooks haben eine Gemeinsamkeit, und ihre Rückgabewerte sind alle leer, das heißt, sie werden zum entsprechenden Zeitpunkt aufgerufen und geben keine Informationen zurück.
Die anderen beiden Haken sind etwas unterschiedlich, sie sind ionViewCanEnter und ionViewCanLeave, die Booleans zurückgeben können.
Schau, ich habe gerade über Zeitformen gesprochen, und jetzt werde ich über modale Verben sprechen. Wenn die ersten 6 Haken eine passive Reaktion der Seite auf den Besuch des Nutzers sind, dann hat die Seite jetzt das Bewusstsein, dich kommen oder gehen zu lassen – ah, die Seite steht von nun an stand!
Diese beiden Hänger spielen eine größere Rolle bei der Kontrolle der Autorität, und in letzter Zeit gibt es einen sehr angesagten Begriff namens Wächter – wie man diesen Wächter versteht, kann man ihn als Torwächter der Gemeinde, den sympathischen Schulleiter und den alten Trappen 2333 mit tausenden Posen im alten Aprikosenblütengebäude verstehen.
Jetzt, da wir bereits wissen, dass es einen boolischen Wert zurückgibt, probieren wir es aus. Da es in unserem Programm keine Geschäftslogik gibt, verwenden wir hier eine Zeit-API zur Bewertung
Der Zugriff auf die Seite ist blockiert
Ähnlich gilt: Wenn du in einer Seite bleiben möchtest, wirst du blockiert, wenn ionViewCanLeave false zurückgibt.
Die Rücklaufoperation wird abgefangen
Konsolendruckinformationen
3 Zusammenfassung
Ähem, kein Unsinn mehr, um zusammenzufassen: Ionic hat folgende Lebenszyklus-Hooks
- ionViewDidLoad wird als erstes Mal aufgerufen, void zurückzugeben
- ionViewWillEnter gibt jedes Mal void zurück, wenn es aufgerufen wird
- ionViewDidEnter gibt jedes Mal void zurück, wenn es aufgerufen wird
- ionViewWillLeave kehrt jedes Mal void zurück, wenn es aufgerufen wird
- ionViewDidLeave kehrt jedes Mal void zurück, wenn es aufgerufen wird
- ionViewWillUnload gibt jedes Mal void zurück, wenn es aufgerufen wird
- ionViewCanEnter gibt jedes Mal boolean zurück, wenn es aufgerufen wird
- ionViewCanLeave gibt jedes Mal boolean zurück, wenn es aufgerufen wird
|
Veröffentlicht am 21.06.2018 10:30:06
|
|
|
|
