Explicação detalhada da função de ciclo de vida do aplicativo uni-app

Explicação detalhada da função de ciclo de vida do aplicativo uni-app

Explicação detalhada da função de ciclo de vida do aplicativo uni-app

---

---

prefácio

Explicação detalhada da função do ciclo de vida do aplicativo uni-app da série de aprendizado UNI-APP

---

1. Funções do ciclo de vida do aplicativo

Nome da função	ilustrar
no lançamento	Acionado quando uni-appa inicialização é concluída (o global é acionado apenas uma vez)
onShow	Quando uni-appiniciado, ou entra na exibição de primeiro plano a partir do segundo plano
onHide	Ao uni-appentrar no plano de fundo do primeiro plano
onError	uni-appAcionado quando um erro é relatado
onUniNViewMessage	Para nvuemonitorar os dados enviados pela página, consulte a comunicação de nvue para vue
onUnhandledRejection	Função de ouvinte de eventos para rejeição de promessa não tratada (2.8.1+)
onPageNotFound	Não há função de escuta na página
onThemeChange	Monitore as alterações do tema do sistema

• Exemplo:

  • onPageNotFound

    • Executado quando o arquivo de paginação correspondente à url não pode ser encontrado

      onPageNotFound(() => {
                
                
          uni.navigateTo({
                
                
              url:'/pages/404/index'
          })
      })
      

    O efeito de execução é mostrado na figura abaixo

Em segundo lugar, a função de ciclo de vida da página

Nome da função	ilustrar
carregando	Monitore o carregamento da página, seu parâmetro são os dados passados ​​na página anterior, o tipo de parâmetro é Object (usado para passagem de parâmetro da página), consulte o exemplo
onShow	A página de monitoramento é exibida. Acionado toda vez que uma página aparece na tela, incluindo o retorno de uma página subordinada para revelar a página atual
onReady	Monitore a conclusão da renderização inicial da página. Observe que se a velocidade de renderização for rápida, ela será acionada antes da página entrar na animação
onHide	Página de escuta oculta
onUnload	Monitorar descarga de página
onResize	Monitorar alterações no tamanho da janela
onPullDownRefresh	Monitore a ação de pull-down do usuário, geralmente usada para atualização de pull-down, consulte o exemplo
onReachBottom	O evento em que a página rola para baixo (não a exibição de rolagem rola para baixo), que geralmente é usado para abrir a próxima página de dados. Para obter detalhes, consulte as notas a seguir
onPageScroll	Monitore a rolagem da página, o parâmetro é Objeto
onNavigationBarButtonTap	Ouça o evento click do botão nativo da barra de título, o parâmetro é Object
onBackPress	Monitore o retorno da página, evento de retorno = {from:backbutton, navigationBack}, backbutton significa que a fonte é o botão Voltar no canto superior esquerdo ou a tecla Voltar do Android; navegaBack significa que a fonte é uni.navigateBack; descrição detalhada e uso: onBackPress detalhado explicação . O miniaplicativo Alipay só pode ser acionado por uma máquina real e só pode monitorar o retorno causado por não-navigateBack e não pode impedir o comportamento padrão.
onNavigationBarSearchInputChanged	Ouça o evento de alteração do conteúdo de entrada da caixa de entrada de pesquisa da barra de título nativa
onNavigationBarSearchInputConfirmed	Ouça o evento de pesquisa da caixa de entrada de pesquisa da barra de título nativa, que é acionada quando o usuário clica no botão "Pesquisar" no teclado virtual.
onNavigationBarSearchInputClicked	Ouça o evento click da caixa de entrada de pesquisa da barra de título nativa (acionado somente quando a configuração searchInput desativada em pages.json é verdadeira)

• Exemplo:
  • onPullDownRefresh
    • Executado quando o usuário puxa para baixo no aplicativo e applet

      onPullDownRefresh(() => {
                
                
        console.log('页面刷新了');
      })
      
      // pages.json
      对应页面配置 "enablePullDownRefresh": true
      

    O resultado da execução é mostrado na figura abaixo
    

---

Resumir

O que foi dito acima é sobre o que quero falar hoje. Este artigo apresenta todo o conteúdo da série de aprendizado UNI-APP, que explica detalhadamente as funções do ciclo de vida do aplicativo uni-app. Continuarei a desenvolver e explicar a estrutura do UNI-APP baseado em VSCode. Se você gosta, clique para seguir, UNI - O tutorial de uso da estrutura do APP continuará sendo atualizado.