uni-app禁用返回按钮/返回键

前言

使用uni-app开发原生应用时，遇到需求：

1. 需要禁用物理返回按钮、手势返回。
2. uni.navigateBack仍可使用。

实现

1. 当前页面的onBackPress()中，禁用物理返回
2. pages.json中，去除当前页面的返回按钮
3. 当前页面的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';
},

以上就是禁用物理返回按钮、手势返回的相关实现逻辑。