Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of APP snooping return event handling in H5. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

When using the MUI framework, we often use a class with a .mui-action-back header

Freight Inquiry

Click the return flag of the header, and you will return to the previous page.

/ / the following is the source code in mui.js. You can see that when you click back, the following operations / / $.hook = {} are done internally to record the browsing history. Back = function () {if (typeof $.options.beforeback = 'function') {if ($.options.beforeback () = false) {return;}} $.doAction (' backs');} DoAction = function (type, callback) {/ / returns the previous record if ($.isFunction (callback)) {/ / specified callback $.each ($.hooks [type], callback);} else {/ / No callback specified, execute $.each ($.hooks [type], function (index, hook) {return! hook.handle ();}) }; $.addAction = function (type, hook) {/ / add history 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];}

When we encapsulate H5 into APP, the 5 + interface we use has the concept of webview, which is a window.

At first, I didn't deliberately distinguish between the two concepts, so sometimes I create a new window to open a web page, or sometimes I directly

Jump through the URL such as: location.href.

As a result, a situation occurs when listening to the back button of the phone, and the scenario looks something like this:

1. Open the software and enter the home page (main.html= > HBuilder [webview]) [the former represents the local access path of URL, and the latter is the ID of window webview].

2. Jump to the login interface via location.href instead of opening it by creating a webview.

3. After logging in, enter the function page, press return, and return to the login page. The expectation is that after I log in, if I click the return button of the phone, I will exit directly. For this reason, we specially understand the fallback function of MUI, which we can implement by overriding this method.

On the page that needs to be monitored:

Mui.back=function () {/ / write what you need to do after listening for the return key

However, if the two modes of web page jump and form creation are used together, there will be unexpected results, that is, mui.back can only be monitored in the entry file, and the monitoring done on other pages or forms will not be triggered, and all of them will be captured by the listening event mui.back of the entry file, and only the listening business logic of the entry file will be executed, which will lead to when the return event is not customized. We can't avoid the embarrassment of going back to the previous page, such as going back to the login page, and customizing the return event to find that all events are monitored by the entry file. This means that there is no point in writing mui.back=function () {} on other pages.

If you open all jump pages as forms, the above problems will not occur. Each window can listen to the function customized by mui.back.

This is the end of the article on "sample analysis of APP snooping return event handling in H5". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.