uni-app禁用返回按鈕/返回鍵的具體實現(xiàn)

更新時間：2022年11月26日 11:41:34 作者：也?簡

今天在使用uni-app開發(fā)登錄頁面時遇到一個需求，需要禁用返回按鈕,下面這篇文章主要給大家介紹了關(guān)于uni-app禁用返回按鈕/返回鍵的具體實現(xiàn),需要的朋友可以參考下

前言

使用uni-app開發(fā)原生應(yīng)用時，遇到需求：

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

實現(xiàn)

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

具體演示代碼

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

onBackPress(options) {
  // 觸發(fā)返回就會調(diào)用此方法，這里實現(xiàn)的是禁用物理返回，頂部導(dǎo)航欄的自定義返回 uni.navigateBack 仍可使用
  if (options.from == 'backbutton') {
    return true;
  } else if (options.from == 'navigateBack') {
    return false;
  }
},

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

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

2、pages.json中，去除當(dāng)前頁面的返回按鈕，主要是設(shè)置：titleNView

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

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

mounted(){
  //pages.json中設(shè)置autoBackButton：false 無效的，可以在需要去除導(dǎo)航返回的頁面中的mounted鉤子里加上如下代碼段
  var backbutton = document.getElementsByClassName('uni-page-head-hd')[0]
  if(backbutton) backbutton.style.display = 'none';
},

以上就是禁用物理返回按鈕、手勢返回的相關(guān)實現(xiàn)邏輯。

附：uni-app H5的返回攔截經(jīng)驗分享

項目需求，要在用戶試圖關(guān)閉或者返回的時候攔截，并彈出提示框。

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

研究了一下，采用popState，大致實現(xiàn)了功能。

在想要攔截返回的頁面的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銷毀監(jiān)聽事件，不然會影響其他頁面

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

保險起見，在跳轉(zhuǎn)到其他頁面的時候，也銷毀監(jiān)聽

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

注意事項：

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

2.有個插件 vue-prevent-browser-back 也是用類似方案，不過不能實現(xiàn)自定義監(jiān)聽。

3.部分瀏覽器，如果用戶進入頁面啥也不干就返回，是監(jiān)聽不到的，最好是彈一個框，讓用戶關(guān)閉從而產(chǎn)生交互。這個暫時找不到更好的辦法。

經(jīng)過測試歸納如下：

safari瀏覽器、firefox瀏覽器、uni-app ios的webview、企業(yè)微信瀏覽器、opera瀏覽器、miui瀏覽器。頁面一打開就能監(jiān)聽到popstate。

微信瀏覽器、chrome瀏覽器、uni-app android的webview、uc瀏覽器、搜狗瀏覽器等大多數(shù)chroumin內(nèi)核瀏覽器，需要頁面交互才能監(jiān)聽popstate

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