So behandeln Sie das Listening-Return-Ereignis in der HTML5-Implementierung in APP

Dieser Artikel stellt Ihnen hauptsächlich relevante Informationen zu den Methodenbeispielen zur Überwachung der Rückgabeereignisverarbeitung in der Html5-App vor. Ich hoffe, er kann Ihnen helfen. Bei der 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 in der Kopfzeile, um zur vorherigen Seite zurückzukehren,

//以下是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 kapseln, 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 speziell die MUI-Rollback-Funktion kennengelernt. Wir können sie implementieren, indem wir diese Methode überschreiben:

Wenn Sie jedoch immer noch die beiden vorherigen Modi zum Springen von Webseiten und zum Erstellen von Formularen verwenden, treten unerwartete Ergebnisse auf, d. h. mui.back kann nur in der Eintragsdatei überwacht werden und die Überwachung erfolgt auf anderen Seiten oder Formulare werden nicht überwacht, alle werden vom Listening-Ereignis mui.back der Eintragsdatei erfasst und nur die Listening-Geschäftslogik der Eintragsdatei wird ausgeführt. Dies führt zu der peinlichen Situation, ohne zur vorherigen Seite zurückzukehren Anpassen des Rückgabeereignisses: Nach der Rückkehr zur Anmeldeseite und dem Anpassen des Rückgabeereignisses wird beispielsweise festgestellt, dass alle Ereignisse von der Eintragsdatei überwacht werden. Das bedeutet, dass es keinen Sinn macht, mui.back=function(){} auf anderen Seiten zu schreiben.

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

Wenn alle Sprungseiten als Formulare geöffnet werden, treten die oben genannten Probleme nicht auf. Normalerweise kann jedes Fenster die benutzerdefinierte Funktion mui.back abhören.

Das obige ist der detaillierte Inhalt vonSo behandeln Sie das Listening-Return-Ereignis in der HTML5-Implementierung in APP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!