处理app物理返回键逻辑

2021-08-03  本文已影响0人  不爱敲代码的程序员

用户在使用App时,对于返回功能的操作,往往习惯于用手机自带的返回键,例如,左滑,右滑,机身自带返回键等,当然iPad除外。所以尽管在APP的每个页面,开发者都有设置返回功能或者跳转功能,但用户在使用时所做的操作可不一定按照开发者所设计的流程走。
例如,用户支付账单,从未支付的状态到完成支付的状态后,开发者会设置button用于用户支付完后跳转相关页面。但实际中,如果用户支付完之后,通过手机自身的返回功能,此时的页面流程就不是开发者所设计的流程了,又返回到支付前的那个页面了,而且状态可能还未修改。当然这样的体验是相当不好的,所以需要去监听手机的物理返回键,从而去做相应的判断处理。
以uniapp项目为例,通过页面中的onBackPress(event)生命周期函数做监听,而不是组件中哦。

一、介绍

当用户在进行以下操作时,就会触发该函数;

二、操作

常见的应用场景就是返回指定页面和应用退出时的弹窗提示;

  1. 返回指定页面:
    如果指定的页面很明确,可以直接调用路由的api去跳转;如果要进入的页面的动态变化的,则需要获取相应的页面栈,然后调用api去跳转。

2 应用退出的弹窗提示,参考代码如下

// this.MaskBool默认为false;
onBackPress() {  
   if(this.MaskBool) {  
     this.MaskBool= false;  
     return true;  
   }else{  
      uni.showModal({  
        title: '提示',  
        content: '是否退出?',  
        success: function(res) {  
            if (res.confirm) {  
                // 退出应用
                plus.runtime.quit();  
            } else if (res.cancel) {  
                console.log('用户点击取消');  
            }  
        }  
      });  
      return true  
   }  
},

Tips:

1 在onBackPress中不要调用 uni.navigateBack() ,会引发死循环的;
2 return false或者不做操作,都是做默认的返回;
3 H5端,顶部导航栏的返回键支持该函数,但手机的返回键及浏览器的返回键是不支持的,微信中也是一样的不支持。

上一篇下一篇

猜你喜欢

热点阅读