Función de interceptación del botón Atrás del navegador WeChat en la esquina superior izquierda

En el desarrollo de cuentas públicas de WeChat, a veces es necesario interceptar y procesar la lógica de la página relacionada con el botón de retorno en la esquina superior izquierda del navegador, en lugar de permitir que la página regrese directamente a la página anterior. implementado muy bien antes. Sin embargo, vi que los resultados en la cuenta oficial de JD Shopping eran muy buenos, así que comencé a probarlo yo mismo. El efecto de JD.com es el siguiente:

A juzgar por el efecto de compra de Jingdong en la imagen de arriba, al hacer clic en buscar aparece una interfaz de búsqueda y luego al hacer clic en la esquina superior izquierda para regresar, simplemente se cierra la interfaz de búsqueda, pero la página no regresa como si se leyera la barra de progreso nuevamente. Y mi página necesita este efecto. Usemos vue para hacer una demostración de este proceso.

Premisa: el botón de retorno en la esquina superior izquierda de WeChat no se puede interceptar, pero se puede monitorear el evento de retorno.

Idea: si realmente desea interceptar el evento de retorno, primero puede agregar un registro a window.history en la página actual (en realidad, simplemente agregue un registro pushState a la pila del historial, el navegador en realidad no cargará esta ruta), cuando haga clic para regresar, escuche el evento de devolución y procese la lógica que desea procesar. De todos modos, WeChat debe ejecutar la devolución. El registro que acaba de agregar se eliminará de window.history y esta ruta reemplazará la ruta de la página actual. Nota: Esto es solo un reemplazo de la ruta. Simplemente cambia el nombre de la ruta y en realidad no la carga.

Implementación: se crean dos páginas vue (primera y dos) en la demostración y la primera página salta a la segunda. Luego aparece una capa de máscara en la segunda página. Cuando hace clic en la esquina superior izquierda para regresar, no regresa a la primera, pero la capa de máscara desaparece primero. Cuando vuelve a hacer clic, regresa a la página anterior;

El efecto es el siguiente:

1 Agregue al método montado de la segunda página y agregue un método para escuchar el evento de retorno. Cuando se hace clic en el botón Volver, la máscara emergente se oculta;

 montado() { let that = this; // Agregar detector de eventos de retorno window.addEventListener(popstate, function(e) { that.isShowTestDiv = false; }, false },

2. Supervise la capa de máscara y agregue un registro a window.history (pila del historial) cuando se muestre;

 ver: { isShowTestDiv: function(newVal, oldVal) { if (newVal === true) { this.pushHistory(); } } } pushHistory() { // Modificar el historial var state = { title: , url: /two / / Esta URL se puede completar de manera informal, solo para evitar que cambie la dirección URL que muestra el navegador y no tiene ningún efecto en la página}; },

3. Si el usuario hace clic en la operación relevante en la capa enmascarada para cerrar la capa enmascarada, debe eliminar manualmente el registro que agregó del historial y volver a la ruta en Vue.

 helloClick() { // Haga clic en la máscara de saludo emergente this.isShowTestDiv = false; this.$router.back() // Elimina el registro agregado del historial}

dirección de demostración

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

Lo anterior es la función de bloqueo del botón Atrás en la esquina superior izquierda del navegador WeChat introducida por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá. tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!