APP-Listening-Return-Event-Verarbeitung in H5

Dieses Mal werde ich Ihnen die Ereignisverarbeitung der APP-Überwachungsrückkehr in H5 vorstellen. Was sind die Vorsichtsmaßnahmen für die APP-Überwachungsrückkehrereignisverarbeitung in H5? . Lasst uns einmal einen Blick darauf werfen.

Bei Verwendung des MUI-Frameworks verwenden wir häufig eine Klasse mit .mui-action-back im Header

<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>

Klicken Sie auf das Zurück-Symbol im Header, um zum vorherigen zurückzukehren Seite,

//以下是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];
    };

Wenn wir H5 in eine APP packen, verfügt die von uns verwendete 5+-Schnittstelle über das Konzept einer Webansicht, bei der es sich um ein Fenster handelt.

Am Anfang habe ich nicht bewusst zwischen diesen beiden Konzepten unterschieden, also habe ich manchmal ein neues Fenster erstellt, um die Webseite zu öffnen, oder manchmal bin ich direkt

über die URL gesprungen, z als location.href.

Dies führt zu einer Situation, wenn die Zurück-Taste des Mobiltelefons überwacht wird. Das Szenario sieht ungefähr wie folgt aus:

1. Öffnen Sie die Software und rufen Sie die Homepage auf (main.html=> ;HBuilder[webview]) [Ersteres stellt den lokalen Zugriffspfad der URL dar, letzteres ist die ID der Fenster-Webansicht].

2. Springen Sie über location.href zur Anmeldeoberfläche, anstatt sie durch Erstellen einer Webansicht zu öffnen.

3. Rufen Sie nach dem Anmelden die Funktionsseite auf, drücken Sie erneut die Eingabetaste und kehren Sie zur Anmeldeseite zurück. Ich erwarte, dass ich mich nach dem Anmelden direkt abmelde, wenn ich auf meinem Telefon auf die Schaltfläche „Zurück“ klicke. Zu diesem Zweck haben wir die MUI-Rollback-Funktion kennengelernt. Wir können sie implementieren, indem wir diese Methode überschreiben.

Auf der Seite, die überwacht werden muss:

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

Wenn wir Befolgen Sie weiterhin den vorherigen Seitensprung und das Mischen der beiden Modi zum Erstellen eines Formulars führt zu unerwarteten Ergebnissen, d. h. mui.back kann nur in der Eintragsdatei überwacht werden, und die Überwachung erfolgt auf anderen Seiten oder Formularen Nicht alle werden vom Listening-Ereignis mui.back der Eintragsdatei erfasst, sondern nur die Listening-Geschäftslogik der Eintragsdatei. Dies führt zu der peinlichen Situation, zur vorherigen Seite zurückzukehren, ohne das Return-Ereignis anzupassen: für Beispiel: Rückkehr Nachdem ich zur Anmeldeseite zurückgekehrt und das Rückgabeereignis angepasst hatte, stellte ich fest, dass alle Ereignisse von der Eintragsdatei überwacht wurden. Das bedeutet, dass es keinen Sinn macht, mui.back=function(){} auf anderen Seiten zu schreiben.

Wenn alle Sprungseiten als Formulare geöffnet werden, treten die oben genannten Probleme nicht auf. Jedes Fenster kann normalerweise die benutzerdefinierte Funktion mui.back überwachen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Tipps zur Verwendung von max-width und min-width

MySQL Root auf Mac-Systemkennwort zurücksetzen

Das obige ist der detaillierte Inhalt vonAPP-Listening-Return-Event-Verarbeitung in H5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!