uniapp(vue3)自定义返回教程onBackPress

首先 onBackPress触发返回行为的来源：'backbutton'——左上角导航栏按钮及安卓返回键；'navigateBack'——uni.navigateBack() 方法。支付宝小程序端不支持返回此字段

官方文档注意事项：

• 只有在该函数中返回值为 true 时，才表示不执行默认的返回，自行处理此时的业务逻辑。
• 当不阻止页面返回却直接调用页面路由相关接口（如：uni.switchTab）时，可能会导致页面显示异常，可以通过延迟调用路由相关接口解决。
• 不返回或返回其它值，均会执行默认的返回行为。
• H5 平台，顶部导航栏返回按钮支持 onBackPress()，浏览器默认返回按键及Android手机实体返回键不支持 onBackPress()
• 暂不支持直接在自定义组件中配置该函数，目前只能是在页面中来处理。

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

<template>  
    <view>  
        <view class="mask">  
        </view>  
    </view>  
</template>  

<script>
</script>  

<style>  
    .mask {  
        position: fixed;  
        top: 0;  
        left: 0;  
        width: 100%;  
        height: 100%;  
        background-color: #000000;  
        opacity: 0.5;  
        z-index: 99;  
    }  
</style>

2.返回是时显示弹窗和遮罩层

在页面中引入 mask 自定义组件后，通过v-if来控制其隐藏/显示。

//返回弹窗显示
<uni-popup  ref="exitDialog" type="dialog">
		<uni-popup-dialog type="warn" cancelText="取消" confirmText="确定" title="通知" content="是否继续退出并保存" @confirm="handleExit" @close="exitClose">
		</uni-popup-dialog>
</uni-popup>
//遮罩层
<mask v-if="showMask"></mask> 

3.自定义退出方法

//当点击确定按钮时 同步一次执行
async function handleExit(){
    //返回保存接口
	await subTestPaper()
	canback.value = true
	goBack()
}
function goBack() {
  uni.navigateBack({
	  delta:1
  });

}

//弹窗确定按钮 如果是确定按钮则变为true
const canback = ref(false)

//返回方法
onBackPress(() =>{
	if(canback.value){
		return false
	}

	if(showMask.value) {  
	    showMask.value = false;  
	    return true;  
	  }else{
			exitDialog.value.open()
			return true 
	  }
})

4.最后别忘了引入

import {onBackPress} from "@dcloudio/uni-app";