uni-app禁用返回按鈕/返回鍵的具體實現

2022-11-27 14:00:45

前言

使用uni-app開發原生應用時，遇到需求：

需要禁用物理返回按鈕、手勢返回。
uni.navigateBack仍可使用。

實現

當前頁面的onBackPress()中，禁用物理返回
pages.json中，去除當前頁面的返回按鈕
當前頁面的mounted()中，隱藏當前頁面的返回按鈕（針對pages.json中設定無效的情況）

具體演示程式碼

1、當前頁面中，在onBackPress()控制是否禁用返回按鈕、手勢返回。

onBackPress(options) {
  // 觸發返回就會呼叫此方法，這裡實現的是禁用物理返回，頂部導航欄的自定義返回 uni.navigateBack 仍可使用
  if (options.from == 'backbutton') {
    return true;
  } else if (options.from == 'navigateBack') {
    return false;
  }
},

onBackPress()中的options.from的值有兩個：backbutton 和 navigateBack。

backbutton：表示來源是左上角原生返回按鈕、 Android 返回鍵或Android手勢返回。
navigateBack：表示來源是頂部導航欄自定義返回按鈕。使用的是uni-app中的返回api：uni.navigateBack(OBJECT)，

2、pages.json中，去除當前頁面的返回按鈕，主要是設定：titleNView

{
  "path": "pages/update/update",
  "style": {
    "navigationStyle": "custom", // 取消本頁面的導航欄
    "app-plus": {
      "animationType": "fade-in", // 設定fade-in淡入動畫，為最合理的動畫型別
      "background": "transparent", // 背景透明
      "backgroundColor": "rgba(0,0,0,0)", // 背景透明
      "popGesture": "none" ,// 關閉IOS螢幕左邊滑動關閉當前頁面的功能
      "titleNView": { //  隱藏當前頁面的返回按鈕
        "titleSize": "18px",
        "autoBackButton": false // 禁用原生導航欄
      }
    }
  }
}

3、當前頁面中，在mounted()中，隱藏當前頁面的返回按鈕（非必須）

mounted(){
  //pages.json中設定autoBackButton：false 無效的，可以在需要去除導航返回的頁面中的mounted勾點裡加上如下程式碼段
  var backbutton = document.getElementsByClassName('uni-page-head-hd')[0]
  if(backbutton) backbutton.style.display = 'none';
},

以上就是禁用物理返回按鈕、手勢返回的相關實現邏輯。

附：uni-app H5的返回攔截經驗分享

專案需求，要在使用者試圖關閉或者返回的時候攔截，並彈出提示框。

uni-app的onBackPress只能攔截左上角的返回，物理按鍵和左滑返回攔截不了，需要另外的解決方案。

研究了一下，採用popState，大致實現了功能。

在想要攔截返回的頁面的mounted新增程式碼

methods:{
    onBack(){
        //檢測到返回再插一條
        window.history.pushState(null, null, document.URL);
         //在這裡彈個彈框什麼的
        uni.showModal(...)
    }
},
mounted(){
     //頁面載入後先插一條記錄
     window.history.pushState(null, null, document.URL);
     window.addEventListener("popstate", this.onBack(), false);
}

在destroyed銷燬監聽事件，不然會影響其他頁面

destroyed() {
    window.removeEventListener("popstate", this.onBack, false);
},

保險起見，在跳轉到其他頁面的時候，也銷燬監聽

methods:{
    toIndex(){
        window.removeEventListener("popstate", this.onBack, false);
        uni.navigateTo({
            url:'/pages/index/index'
        })
    }
}

注意事項：

1.其他頁面的返回事件，要改為 history.back() ,不能是 uni.navigateBack()。

2.有個外掛 vue-prevent-browser-back 也是用類似方案，不過不能實現自定義監聽。

3.部分瀏覽器，如果使用者進入頁面啥也不幹就返回，是監聽不到的，最好是彈一個框，讓使用者關閉從而產生互動。這個暫時找不到更好的辦法。

經過測試歸納如下：

safari瀏覽器、firefox瀏覽器、uni-app ios的webview、企業微信瀏覽器、opera瀏覽器、miui瀏覽器。頁面一開啟就能監聽到popstate。

微信瀏覽器、chrome瀏覽器、uni-app android的webview、uc瀏覽器、搜狗瀏覽器等大多數chroumin核心瀏覽器，需要頁面互動才能監聽popstate

(可能存在版本高低的差異，不一定準確)