Fonction d'interception du bouton retour du navigateur WeChat dans le coin supérieur gauche

Dans le développement des comptes publics WeChat, il est parfois nécessaire d'intercepter et de traiter la logique de la page liée au bouton de retour dans le coin supérieur gauche du navigateur, au lieu de laisser la page revenir directement à la page précédente. très bien mis en œuvre auparavant. Cependant, j'ai vu que les résultats sur le compte officiel de JD Shopping étaient très bons, j'ai donc commencé à essayer moi-même. L'effet de JD.com est le suivant :

À en juger par l'effet d'achat à Jingdong dans l'image ci-dessus, cliquer sur Rechercher fait apparaître une interface de recherche, puis cliquer sur le coin supérieur gauche pour revenir. Cela ferme simplement l'interface de recherche, mais la page ne revient pas comme si vous lisiez à nouveau la barre de progression. , et ma page a besoin de cet effet. Utilisons vue pour faire une démonstration de ce processus.

Prémisse : le bouton de retour dans le coin supérieur gauche de WeChat ne peut pas être intercepté, mais l'événement de retour peut être surveillé.

Idée : si vous souhaitez véritablement intercepter l'événement de retour, vous pouvez d'abord ajouter un enregistrement à window.history sur la page actuelle (en fait, ajoutez simplement un enregistrement pushState à la pile d'historique, le navigateur ne chargera pas réellement ce chemin), lorsque vous cliquez pour revenir, écoutez l'événement de retour et traitez la logique que vous souhaitez traiter. Quoi qu'il en soit, WeChat doit exécuter le retour. L'enregistrement qui vient d'être ajouté sera supprimé de window.history et ce chemin remplacera le chemin de la page actuelle. Remarque : Il s'agit simplement d'un remplacement du chemin. Cela modifie simplement le nom du chemin et ne charge pas réellement le chemin.

Implémentation : deux pages de vue (première et deux) sont créées dans la démo, et la première page passe à la deuxième page. Ensuite, un calque de masque apparaît sur la deuxième page. Lorsque vous cliquez sur le coin supérieur gauche pour revenir, il ne revient pas au premier, mais le calque de masque disparaît en premier. Lorsque vous cliquez à nouveau en arrière, vous revenez à la page précédente.

L'effet est le suivant :

1 Ajoutez à la méthode montée de la deuxième page et ajoutez une méthode pour écouter l'événement de retour. Lorsque vous cliquez sur le bouton de retour, le masque contextuel est masqué ;

 monté() { let that = this; // Ajouter un écouteur d'événement de retour window.addEventListener(popstate, function(e) { that.isShowTestDiv = false; }, false },

2. Surveillez la couche de masquage et ajoutez un enregistrement à window.history (pile historique) lorsqu'il est affiché ;

 watch: { isShowTestDiv: function(newVal, oldVal) { if (newVal === true) { this.pushHistory(); } } } pushHistory() { // Modifier l'historique var state = { title: , url: /two / / Cette URL peut être renseignée avec désinvolture, juste pour empêcher que l'adresse URL affichée par le navigateur ne change, et cela n'a aucun effet sur la page}; window.history.pushState(state, state.title, state.url); },

3. Si l'utilisateur clique sur l'opération appropriée sur la couche masquée pour fermer la couche masquée, il doit supprimer manuellement l'enregistrement qu'il a ajouté de l'historique et sauvegarder l'itinéraire dans Vue.

 helloClick() { // Cliquez sur le masque de bonjour contextuel this.isShowTestDiv = false; this.$router.back(); // Supprimez l'enregistrement ajouté de l'historique}

adresse de démonstration

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

Ce qui précède est la fonction de blocage du bouton de retour dans le coin supérieur gauche du navigateur WeChat introduite par l'éditeur. J'espère qu'elle vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra. temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !