Traitement des événements de retour d'écoute APP dans H5

Cette fois, je vais vous présenter le traitement des événements du retour de surveillance APP en H5. Quelles sont les précautions pour le traitement des événements de retour de surveillance APP en H5. . Jetons un coup d'oeil une fois.

Lorsque nous utilisons le framework MUI, nous utilisons souvent une classe avec .mui-action-back dans l'en-tête

<header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">货物查询</h1>
        </header>

Cliquez sur l'icône de retour de l'en-tête, cela reviendra au précédent page,

//以下是mui.js中的源码，可以看到，在点击返回的时候，内部做了以下的操作
//$.hook={}是专门用于记录浏览的历史的。
$.back = function() {
        if (typeof $.options.beforeback === 'function') {
            if ($.options.beforeback() === false) {
                return;
            }
        }
        $.doAction('backs');
    };
$.doAction = function(type, callback) {//返回上一个记录
        if ($.isFunction(callback)) { //指定了callback
            $.each($.hooks[type], callback);
        } else { //未指定callback，直接执行
            $.each($.hooks[type], function(index, hook) {
                return !hook.handle();
            });
        }
    };
$.addAction = function(type, hook) {//添加历史记录
        var hooks = $.hooks[type];
        if (!hooks) {
            hooks = [];
        }
        hook.index = hook.index || 1000;
        hooks.push(hook);
        hooks.sort(function(a, b) {
            return a.index - b.index;
        });
        $.hooks[type] = hooks;
        return $.hooks[type];
    };

Lorsque nous emballons H5 dans une application, l'interface 5+ que nous utilisons a le concept de webview, qui est une fenêtre.

Au début, je n'ai pas délibérément fait de distinction entre ces deux concepts, alors parfois je créais une nouvelle fenêtre pour ouvrir la page Web, ou parfois je sautais directement

par l'URL, par exemple comme emplacement.href.

Cela conduira à une situation lors de la surveillance du bouton retour du téléphone mobile. Le scénario est à peu près le suivant :

1. Ouvrez le logiciel et entrez dans la page d'accueil (main.html=>). ;HBuilder[webview]) [Le premier représente le chemin d'accès local de l'URL, et le second est l'ID de la fenêtre webview].

2. Accédez à l'interface de connexion via location.href au lieu de l'ouvrir en créant une vue Web.

3. Après vous être connecté, entrez dans la page de fonction, appuyez à nouveau sur Retour et revenez à la page de connexion. On s'attend à ce qu'après m'être connecté, si je clique sur le bouton de retour de mon téléphone, je me déconnecte directement. À cette fin, nous avons spécialement découvert la fonction de restauration MUI. Nous pouvons la mettre en œuvre en remplaçant cette méthode

Sur la page qui doit être surveillée :

mui.back=function(){
//写你监听返回键后需要做的操作

Cependant, si nous. suivez toujours le saut de page précédent et le mélange des deux modes de création d'un formulaire produira des résultats inattendus, c'est-à-dire que mui.back ne peut être surveillé que dans le fichier d'entrée, et la surveillance effectuée sur d'autres pages ou formulaires le fera ne sera pas déclenché. Tout Capté par l'événement d'écoute mui.back du fichier d'entrée, seule la logique métier d'écoute du fichier d'entrée sera exécutée, ce qui conduit à la situation embarrassante de revenir à la page précédente sans personnaliser l'événement de retour : pour. exemple, return Après être revenu à la page de connexion et avoir personnalisé l'événement de retour, j'ai constaté que tous les événements étaient surveillés par le fichier d'entrée. Cela signifie que cela n'a aucun sens d'écrire mui.back=function(){} sur d'autres pages.

Si toutes les pages de renvoi sont ouvertes sous forme de formulaires, les problèmes ci-dessus ne se produiront pas. Chaque fenêtre peut normalement surveiller la fonction personnalisée mui.back

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Conseils pour utiliser la largeur maximale et la largeur minimale

MySQL Réinitialiser la racine sur le mot de passe du système Mac

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!