Função de interceptação do botão Voltar do navegador WeChat no canto superior esquerdo

No desenvolvimento de contas públicas do WeChat, às vezes é necessário interceptar e processar a lógica da página relacionada ao botão de retorno no canto superior esquerdo do navegador, ao invés de deixar a página retornar diretamente à página anterior. implementado muito bem antes. Porém, vi que os resultados na conta oficial do JD Shopping foram muito bons, então comecei a tentar sozinho. O efeito do JD.com é o seguinte:

A julgar pelo efeito de compras Jingdong na imagem acima, clicar em pesquisar abre uma interface de pesquisa e, em seguida, clicar no canto superior esquerdo para retornar. Apenas fecha a interface de pesquisa, mas a página não retorna como ler a barra de progresso novamente. , e minha página precisa desse efeito. Vamos usar vue para fazer uma demonstração desse processo.

Premissa: O botão de retorno no canto superior esquerdo do WeChat não pode ser interceptado, mas o evento de retorno pode ser monitorado.

Ideia: Se você deseja realmente interceptar o evento de retorno, você pode primeiro adicionar um registro a window.history na página atual (na verdade, basta adicionar um registro pushState à pilha de histórico, o navegador não carregará esse caminho), quando você clique para retornar, ouça o evento de retorno e processe a lógica que deseja processar. De qualquer forma, o WeChat deve executar o retorno. O registro recém-adicionado será retirado de window.history e este caminho substituirá o caminho da página atual. Nota: Esta é apenas uma substituição do caminho. Apenas altera o nome do caminho e na verdade não carrega o caminho.

Implementação: Duas páginas vue (primeira e duas) são criadas na demonstração, e a primeira página salta para a segunda página. Em seguida, uma camada de máscara aparece na segunda página. Ao clicar no canto superior esquerdo para retornar, ela não retorna à primeira, mas a camada de máscara desaparece primeiro.

O efeito é o seguinte:

1 Adicione ao método montado da segunda página e adicione um método para escutar o evento de retorno. Quando o botão retornar é clicado, a máscara pop-up fica oculta;

 montado() { let that = this; // Adicionar ouvinte de evento de retorno window.addEventListener(popstate, function(e) { that.isShowTestDiv = false; }, false },

2. Monitore a camada de máscara e adicione um registro a window.history (pilha de histórico) quando ela for exibida;

 watch: { isShowTestDiv: function(newVal, oldVal) { if (newVal === true) { this.pushHistory(); / Este URL pode ser preenchido casualmente, apenas para evitar que o endereço URL exibido pelo navegador mude, e não tem efeito na página}; },

3. Se o usuário clicar na operação relevante na camada mascarada para fechar a camada mascarada, ele deverá remover manualmente o registro que adicionou do histórico e retornar a rota no Vue.

 helloClick() { // Clique na máscara pop-up hello this.isShowTestDiv = false; this.$router.back();

endereço de demonstração

GitHub: https://github.com/LiJinShi/wechat_back_vue

A descrição acima é a função de bloqueio do botão Voltar no canto superior esquerdo do navegador WeChat introduzida pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a você. tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!