1. 使用自定义返回事件
//返回
back() {
// 业务逻辑,弹窗提醒
uni.showModal({
title: '内容尚未保存,是否保存?',
success: function (res) {
if (res.confirm) {
saveFun()
} else if (res.cancel) {
console.log('用户点击取消');
// 然后返回
uni.navigateBack()
}
}
})
},
结果:点击自定义的按钮没有问题,但是使用原生按钮返回或者是侧滑返回依旧不执行自定义逻辑
2. 使用onBackPress生命周期函数
onBackPress((option) =>{
if(option.from === 'backbutton'){
uni.showModal({
title: '内容尚未保存,是否保存?',
success: function (res) {
if (res.confirm) {
saveFun()
} else if (res.cancel) {
console.log('用户点击取消');
// 然后返回
uni.navigateBack()
}
}
})
}
return true;
})
结果:虽然会提醒,但是无法阻止返回事件,在用户还没有点击保存的时候,它就已经返回到上一个页面了,这个也不行
3. 我测试成功的方案:使用uni拦截器
- 添加拦截器
onShow(() =>{
const {diaryContext,setDiaryContext} = useEditStore();
setDiaryContext(diaryRef.value)
uni.addInterceptor('navigateBack', {
invoke(args) {
// 判断是不是返回按钮触发的返回事件
if(args?.from === 'backbutton'){
// 必须使用状态管理获取组件实例,拦截器中不能直接拿到组件的实例
backFun(diaryContext);
return false; // 阻止返回
}else{
return true; // 允许返回
}
}
})
})
- 卸载拦截器,拦截器需要记得卸载
onHide(() =>{
uni.removeInterceptor('navigateBack')
})
结果:使用拦截器就可以将原生返回事件进行自定义修改,包括静止原生返回事件
ps: 仅仅在安卓app 中测试有效,其他的没有测试