집 > 기사 > 웹 프론트엔드 > H5에서 APP 청취 반환 이벤트 처리

H5에서 APP 청취 반환 이벤트 처리

php中世界最好的语言원래의: 2018-03-20 13:26:254691검색

이번에는 H5의 APP 모니터링 반환 이벤트 처리 에 대해 알려 드리겠습니다. H5의 주의 사항 은 무엇입니까? 실제 사례는 다음과 같습니다.

MUI 프레임워크를 사용할 때 헤더에 .mui-action-back이 포함된 클래스를 자주 사용합니다

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

이전 페이지로 돌아가려면 헤더의 돌아가기 아이콘을 클릭하세요.

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

H5를 APP에 캡슐화할 때 , 우리가 사용하는 5+ 인터페이스는 창인 webview 개념을 가지고 있습니다.

처음에는 이 두 개념을 고의로 구분하지 않았기 때문에 때로는 새 창을 열어 웹 페이지를 열 수도 있고, 때로는 location.href와 같은 URL을 직접

뛰어 넘기기도 했습니다.

휴대폰의 뒤로 버튼을 모니터링할 때 상황이 발생합니다. 대략적인 장면은 다음과 같습니다.

1. 소프트웨어를 열고 홈페이지(main.html=>HBuilder[webview])에 들어갑니다. 이전 윈도우 웹뷰의 ID인 URL의 로컬 접근 경로를 나타냅니다].

2. 웹뷰를 생성하여 여는 대신 location.href를 통해 로그인 인터페이스로 이동합니다.

3. 로그인 후 기능 페이지로 들어가 다시 Return 키를 눌러 로그인 페이지로 돌아갑니다. 로그인한 후 휴대폰에서 복귀 버튼을 클릭하면 바로 로그아웃될 것으로 예상됩니다. 이를 위해 특별히 MUI의 대체 기능에 대해 배웠습니다. 이 방법을 재정의하여 구현할 수 있습니다

모니터링해야 하는 페이지에서:

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

그러나 여전히 웹 페이지 점프 및 양식의 이전 두 가지 모드를 사용하는 경우 예상치 못한 결과는 mui.back이 항목 파일에서만 모니터링될 수 있다는 것입니다. 다른 페이지나 양식에서 수행된 모니터링은 모두 항목의 모니터링 이벤트 mui.back에 의해 캡처되지 않습니다. 파일의 모니터링 비즈니스 로직만 실행하면 반환 이벤트를 사용자 정의하지 않고 이전 페이지로 돌아가는 당황스러운 상황이 발생합니다. 예를 들어 로그인 페이지로 돌아가고 반환 이벤트를 사용자 정의하여 모든 이벤트를 검색합니다. 모두 항목 파일에 의해 모니터링됩니다. 즉, 다른 페이지에 mui.back=function(){}을 작성하는 것은 의미가 없습니다.

모든 점프 페이지를 폼으로 열면 위의 문제는 발생하지 않습니다. 각 창에서는 일반적으로 mui.back 사용자 정의 기능을 모니터링할 수 있습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!