Per mia esperienza, la maggior parte degli studenti conosce questo concetto. Se non ne sai molto, allora devi sapere che il browser attiverà un evento onload quando una pagina web viene caricata, e di solito usiamo il metodo $(document).load() in window.onload o jquery per definire cosa dovrebbe fare una pagina web quando viene caricata.
In un'APP, questo tipo di evento è più ricco. Molte volte, devi fare qualcosa per gli utenti prima che vedano la pagina, la più comune è estrarre dati dal server; O fare qualcosa quando stanno per lasciare una pagina.
1. Comprendere l'hook del ciclo vitale ionico
A partire da Ionic 3.8.0, il framework fornisce 8 funzioni hook che vengono attivate in varie fasi del ciclo di vita della pagina.
1.1 ionViewDidLoad
Il trigger di completamento del caricamento della pagina, qui "load complete", si riferisce allo stato della pagina in cui le risorse richieste sono state caricate, ma non sono ancora entrate nello stato della pagina (l'utente vede ancora la pagina precedente).
Va notato che è un gancio molto arrogante, che verrà chiamato solo una volta in tutto il processo, cioè viene chiamato quando entri nella pagina per la prima volta, e dopo, qualunque cosa tu faccia entrare ed escere, sarà deserto e miserabile. A meno che tu non spegni lo sfondo e rientri nel software (va anche bene premere aggiorna mentre si debugga la pagina web).
Pertanto, questo hook è adatto per effettuare un'elaborazione una tantum, come estrarre dati utente dal server e memorizzarli nella cache.
1.2 ionViewWillEnter
La comprensione letterale è il momento in cui "sto entrando", quando la pagina inizia semplicemente a cambiare. A questo punto puoi pre-processare i dati della pagina, e questo hook verrà chiamato ogni volta.
1.3 ionViewDidEnter
Quando questo hook viene attivato, l'utente è entrato in una nuova pagina (la pagina è attiva) e verrà chiamata ogni volta.
A proposito, devo intervenire: la denominazione degli hook da parte di Ionic è davvero amichevole per la maggior parte degli studenti cinesi, e uno risolverà e uno RISOLVERÀ il problema. A differenza di alcuni framework glamour (sbagliati) all'esterno, ci sono molti sistemi pronti, aggiornati, compilati, deistori, ecc., ricorda una volta e dimentica una volta. (Certo, è uno scherzo, la denominazione dei componenti è strettamente legata al meccanismo operativo del framework)
1.4 ionViewWillLeave
Page Ready (sta per avviarsi) si attiva quando l'utente ha appena premuto il pulsante di ritorno o l'evento correlato.
1.5 ionVistaLasciataLascia
Se la pagina è finita, si attiva e diventa inattiva.
1.6 ionViewWillScaricherà
Si attiva quando una risorsa in una pagina sta per essere distrutta, diresti che questo hook, come ionViewDidLoad, verrà attivato solo una volta?
1.7 Test
Prendiamo la pagina che abbiamo creato nella sezione precedente e facciamo un test sul caricamento dell'uncino.
Nella sezione precedente, abbiamo implementato il processo di passaggio da HomePage a TestPage usando pulsanti, e ora aggiungiamo i sei hook sopra sopra a TestPage e osserviamo la loro invocazione attraverso la console.
Il codice della sezione tema della pagina è il seguente
Nota che ho anche aggiunto un'istruzione test al costruttore. Apri il debug di Serve, clicca il pulsante, vai su TestPage e osserva cosa produce la console.
Prima volta sulla pagina
Torna alla home page e osserva cosa produce la console.
Lasciare la pagina per la prima volta
Entra ed esci di nuovo dalla TestPage e osserva cosa produce la console.
Secondo ingresso e uscita
Si possono trarre le seguenti conclusioni:
- Il costruttore viene attivato prima di ionViewDidLoad
- ionViewDidLoad si attiva solo quando entri per la prima volta nella pagina
- ionViewWillUnload viene attivato ogni volta che esci dalla pagina
2. Ci sono anche due ganci di guardia
All'inizio ho detto che Ionic offre 8 ganci, mentre ne ho introdotti solo 6. I primi 6 hook hanno una comunità, e i loro valori di ritorno sono tutti nulli, cioè vengono chiamati al momento corrispondente e non restituiscono alcuna informazione.
Gli altri due hook sono un po' diversi, sono ionViewCanEnter e ionViewCanLeave, che possono restituire booleani.
Guarda, ho appena parlato dei tempi verbali, e ora parlerò dei verbi modali. Se i primi 6 agganci sono una risposta passiva della pagina alla visita dell'utente, allora ora la pagina ha la coscienza di permetterti di venire o di lasciarti andare, ah, la pagina è rimasta in piedi da ora in poi!
Questi due agganci giocano un ruolo più importante nel controllo dell'autorità, e recentemente c'è un termine molto di moda chiamato Guardia, come comprendere questa guardia, puoi capirla come guardiana della comunità, la preside amichevole e il vecchio otardo 2333 con migliaia di posture nell'antico edificio dei fiori di albicocca.
Ora che sappiamo già che restituisce un valore booleano, proviamoci. Poiché nel nostro programma non c'è una logica di business, usiamo un'API temporale per giudicare
L'accesso alla pagina è bloccato
Allo stesso modo, se vuoi lasciare in una pagina, se ionViewCanLeave restituisce falso, verrai bloccato.
L'operazione di ritorno viene intercettata
Informazioni stampate su console
3 Sommario
Ehm, basta sciocchezze, per riassumere, Ionic ha i seguenti hook per il ciclo di vita
- ionViewDidLoad viene chiamato la prima volta a restituire il vuoto
- ionViewWillEnter restituisce il void ogni volta che viene chiamato
- ionViewDidEnter restituisce il void ogni volta che viene chiamato
- ionViewWillLeave restituisce il vuoto ogni volta che viene chiamato
- ionViewDidLeave restituisce il vuoto ogni volta che viene chiamato
- ionViewWillUnload restituisce void ogni volta che viene chiamato
- ionViewCanEnter restituisce boolean ogni volta che viene chiamato
- ionViewCanLeave restituisce boolean ogni volta che viene chiamato
|
Pubblicato su 21/06/2018 10:30:06
|
|
|
|
