Na minha experiência, a maioria dos alunos conhece esse conceito. Se você não sabe muito, então deve saber que o navegador vai acionar um evento onload quando uma página web for carregada, e geralmente usamos o método $(document).load() no windows.onload ou jquery para definir o que uma página web deve fazer quando for carregada.
Em um APP, esse tipo de evento é mais rico. Muitas vezes, você precisa fazer algo pelos usuários antes que vejam a página, o mais comum é puxar dados do servidor; Ou fazer algo quando estiverem prestes a sair de uma página.
1. Entender o gancho do ciclo de vida iônico
A partir do Ionic 3.8.0, o framework fornece 8 funções hook que são acionadas em várias etapas do ciclo de vida da página.
1.1 ionViewDidLoad
O gatilho de completamento de carregamento da página, aqui "carregamento completo", refere-se ao estado da página em que os recursos necessários foram carregados, mas ainda não entraram no estado da página (o usuário ainda está vendo a página anterior).
Deve-se notar que é um gancho muito arrogante, que só será chamado uma vez em todo o processo, ou seja, é chamado quando você entra na página pela primeira vez e, depois disso, não importa como você entre e saia, ela estará deserta e miserável. A menos que você desligue o segundo plano e entre novamente no software (também é aceitável apertar atualizar enquanto depura a página web).
Portanto, esse gancho é adequado para que você faça algum processamento único, como puxar dados do usuário do servidor e armazená-los no cache.
1.2 ionViewWillEnter
O entendimento literal é o momento em que "estou entrando", quando a página simplesmente começa a mudar. Você pode pré-processar os dados da página neste ponto, e esse hook será chamado toda vez.
1.3 ionViewDidEnter
Quando esse hook é acionado, o usuário entrou em uma nova página (a página está ativa), e ela será chamada toda vez.
Falando nisso, preciso intervir: a forma como Ionic nomeia os ganchos é muito amigável para a maioria dos estudantes chineses, e um vai e o outro RESOLVEU o problema. Diferente de alguns frameworks glamourosos (errados) lá fora, existem vários preparados, atualizados, conformados, destory, etc., lembra uma vez e esquece uma vez. (Claro, isso é uma piada, a nomeação dos componentes está intimamente relacionada ao mecanismo de operação do framework)
1.4 ionViewWillLeave
O Page Ready (está prestes a ser) é acionado quando o usuário acaba de acionar o botão de voltar ou evento relacionado.
1.5 ionViewDidLeave
É acionado quando a página termina, ela fica inativa.
1.6 ionViewWillUnload
Dispara quando um recurso em uma página está prestes a ser destruído, você acha que esse gancho, como ionViewDidLoad, só será acionado uma vez?
1.7 Testes
Vamos pegar a página que criamos na seção anterior e fazer um teste sobre o carregamento do gancho.
Na seção anterior, implementamos o processo de pular da HomePage para a TestPage usando botões, e agora adicionamos os seis ganchos acima ao TestPage e observamos sua invocação pelo console.
O código da seção tema da página é o seguinte
Note que também adicionei uma instrução de teste ao construtor. Abra a depuração do Serve, clique no botão, vá até a Página de Teste e observe o que o console gera.
Primeira vez na página
Volte para a página inicial e observe o que o console transmite.
Saindo da página pela primeira vez
Entrar e sair da Página de Teste novamente e observe o que o console gera.
Segunda entrada e saída
As seguintes conclusões podem ser tiradas:
- O construtor é acionado antes do ionViewDidLoad
- ionViewDidLoad só dispara quando você entra na página pela primeira vez
- ionViewWillUnload é acionado cada vez que você sai da página
2. Também existem dois ganchos de guarda
Mencionei no começo que o Ionic oferece 8 ganchos, enquanto eu só introduzi 6. Os primeiros 6 hooks têm uma comum, e seus valores de retorno são todos nulos, ou seja, são chamados no momento correspondente e não retornam nenhuma informação.
Os outros dois ganchos são um pouco diferentes, são ionViewCanEnter e ionViewCanLeave, que podem devolver booleanos.
Olha, acabei de falar sobre tempos verbais, e agora vou falar sobre verbos modais. Se os primeiros 6 ganchos são uma resposta passiva da página à visita do usuário, então agora, a página tem consciência para permitir que você venha ou permita que você vá, ah, a página se levantou a partir de agora!
Esses dois ganchos têm um papel mais importante no controle da autoridade, e recentemente há um termo muito popular chamado Guarda, como entender esse guarda, você pode entendê-lo como o guardião da comunidade, o simpático diretor e o velho abetarda 2333 com milhares de posturas no antigo prédio de flores de damasco.
Agora que já sabemos que ele retorna um valor booleano, vamos tentar. Como não há lógica de negócios em nosso programa, vamos usar uma API de tempo para julgar aqui
O acesso à página está bloqueado
Da mesma forma, se você quiser sair em uma página, se ionViewCanLeave devolver falso, você será bloqueado.
A operação de retorno é interceptada
Informações impressas no console
3 Resumo
Ahem, chega de bobagem, para resumir, o Ionic tem os seguintes ganchos do ciclo de vida
- ionViewDidLoad é chamado de primeira vez para retornar void
- ionViewWillEnter retorna o void toda vez que é chamado
- ionViewDidEnter retorna o void toda vez que é chamado
- ionViewWillLeave retorna o void toda vez que é chamado
- ionViewDidLeave retorna o void toda vez que é chamado
- ionViewWillUnload retorna void toda vez que é chamado
- ionViewCanEnter retorna booleano toda vez que é chamado
- ionViewCanLeave retorna booleano toda vez que é chamado
|
Publicado em 21/06/2018 10:30:06
|
|
|
|
