使用MUI框架的時候,我們常常會用到一個頭部有.mui-action-back的class
<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。
這樣就會導致,在監聽手機的back按鍵時,出現了一種情況,其場景大致是下面這樣:
1.開啟軟體進入首頁(main.html=>HBuilder[webview])【前者表示URL的本機存取路徑,後者是視窗webview的ID】。
2、透過location.href跳到登入介面,而並非透過建立webview來開啟。
3.登陸後進入功能頁面,再按返回,又返回到了登入頁面。預期是希望,我登入後,如果點擊手機的回傳鍵,直接退出的。為此特意了解了MUI的回退函數,我們可以透過複寫這個方法來實現
在需要監聽的頁面:
mui.back=function(){//寫你監聽返回鍵後需要做的操作
但是,如果還是按照之前網頁跳轉和創建窗體兩種模式混合使用會出現意想不到的結果,也就是mui.back只能在入口文件被監聽,在其他頁面或窗體做的監聽都不會被觸發,全部被入口文件的監聽事件mui.ba ck捕獲了,只會執行入口文件的監聽業務邏輯,這樣就導致了,在不自定義返回事件的時候,我們沒法避免返回上一個頁面的尷尬情況:比如回退到了登錄頁面,而自定義返回事件,發現所有的事件都被入口文件監聽了。這意味著其他頁面寫mui.back=function(){}是沒有意義的。
而將所有的跳頁都當作窗體打開,則不會出現以上問題。每個視窗都能正常監聽mui.back自訂的function
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。