uni-app onBackPress返回事件逻辑处理

╰+哭是因爲堅強的太久メ 2023-02-26 05:21 10阅读 0赞

**onBackPress(event) 生命周期函数。**

onBackPress(event) 返回 event =\{from: backbutton | navigateBack\}

说明：  
当用户进行以下操作时，会触发该函数：

*  **Android 实体返回键 (from = backbutton)**
 *  **顶部导航栏左边的返回按钮 (from = backbutton)**
 *  **返回 API，即 uni.navigateBack() (from = navigateBack)**

注意事项：

1.  函数中返回值为`true` 时， `表示不执行默认的返回，执行自定义的的业务逻辑`。
2.  不返回或返回其它值，均会执行默认的返回行为。
3.  H5 平台，顶部导航栏返回按钮支持 onBackPress()，浏览器默认返回按键及Android手机实体返回键不支持 onBackPress()
4.  暂不支持直接在自定义组件中配置该函数，目前只能是在页面中来处理。

**场景示例**

(**1)页面返回**  
场景说明：

页面中的遮罩处于显示状态时，点击返回不直接关闭页面，而是隐藏掉遮罩。遮罩隐藏后，继续点击返回再执行默认的逻辑。

自定义遮罩  
通常自定义的遮罩/弹出层，都会做成组件，这样方便复用。

新建 uni-app 项目->components->mask.vue 文件，代码如下：

<template>  
        <view>  
            <view class="cpt-mask">  
            </view>  
        </view>  
    </template>  
    
    <script>  
        export default { }  
    </script>  
    
    <style>  
        .cpt-mask {   
            position: fixed;  
            top: 0;  
            left: 0;  
            width: 100%;  
            height: 100%;  
            background-color: #000000; 
            opacity: 0.5;  
            z-index: 99;  
        }  
    </style>

引用遮罩组件  
在页面中引入 mask 自定义组件后，通过一个`状态值`**来控制其隐藏/显示**。

`注意`：这里用`v-if`，不要用 v-show，自定义组件存在一些问题待优化  
**处理返回逻辑**  
在 onBackPress 中，判定当前遮罩是否处于显示状态。如果显示，则关闭遮罩并返回 true。

onBackPress() {   
      if(this.showMask) {   
        this.showMask = false;  
        return true;  
      }  
    },

**多级返回**  
部分业务场景下，返回的逻辑中需要返回多级页面。  
**由于 uni.navigateBack() 同样会触发 onBackPress 函数。因此在 onBackPress 中直接调用 uni.navigateBack() 并始终返回 true 会引发死循环。**  
此时，需要根据 onBackPress 的回调对象中的`from`值来做处理，当来源是 ‘navigateBack’ 时，返回 false。

onBackPress(options) {   
                if (options.from === 'navigateBack') {   
                    return false;  
                }  
                this.back();  
                return true;  
            },  
            methods: {   
                back() {   
                    uni.navigateBack({   
                        delta: 2  
                    });  
                }  
            },

**应用退出**  
场景说明：  
若在App首页，点击手机物理返回键，此时无返回页面可关闭，uni-app默认会提示“再按一次退出应用”；若想自定义退出信息，如修改为：出现一个拟态窗口提示我们是否退出应用，点击确定退出应用。点击取消，不做操作。

实现方案：

在 onBackPress 中,遮罩不显示的状态下，点击返回键将弹出拟态窗。

onBackPress() {   
       if(this.showMask) {   
         this.showMask = false;  
         return true;  
       }else{   
          uni.showModal({   
            title: '提示',  
            content: '是否退出uni-app？',  
            success: function(res) {   
                if (res.confirm) {   
                    // 退出当前应用，改方法只在App中生效  
                    plus.runtime.quit();  
                } else if (res.cancel) {   
                    console.log('用户点击取消');  
                }  
            }  
          });  
          return true  
       }  
    },

参考文章：[https://ask.dcloud.net.cn/article/35120][https_ask.dcloud.net.cn_article_35120]

[https_ask.dcloud.net.cn_article_35120]: https://ask.dcloud.net.cn/article/35120