uniapp 如何修改 返回按钮(左上角+物理按钮+侧滑)触发的返回事件

背景:

使用uniapp 开发安卓app,在用户编辑后直接返回时,使用弹窗提醒用户:还没有保存,是否保存?

方案

1. 使用自定义返回事件

ts 复制代码
//返回
back() {
// 业务逻辑,弹窗提醒
uni.showModal({
	title: '内容尚未保存,是否保存?',
	success: function (res) {
		if (res.confirm) {
			saveFun()
		} else if (res.cancel) {
			console.log('用户点击取消');
			// 然后返回
			uni.navigateBack()
		}
	}
})

},

结果:点击自定义的按钮没有问题,但是使用原生按钮返回或者是侧滑返回依旧不执行自定义逻辑

2. 使用onBackPress生命周期函数

ts 复制代码
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拦截器

  • 添加拦截器
ts 复制代码
onShow(() =>{
	const {diaryContext,setDiaryContext} = useEditStore();
	setDiaryContext(diaryRef.value)
	uni.addInterceptor('navigateBack', {
	invoke(args) {
			// 判断是不是返回按钮触发的返回事件
		  if(args?.from === 'backbutton'){
		  		// 必须使用状态管理获取组件实例,拦截器中不能直接拿到组件的实例
			  backFun(diaryContext);
			  return false; // 阻止返回
		  }else{
			  return true; // 允许返回
		  }
	}
	})
})
  • 卸载拦截器,拦截器需要记得卸载
ts 复制代码
onHide(() =>{
	uni.removeInterceptor('navigateBack')
})

结果:使用拦截器就可以将原生返回事件进行自定义修改,包括静止原生返回事件

ps: 仅仅在安卓app 中测试有效,其他的没有测试

相关推荐
!win !4 小时前
uni-app项目支付宝端Input不受控
小程序·uni-app·支付宝小程序
xw54 小时前
uni-app项目支付宝端Input不受控
前端·uni-app·支付宝
百思可瑞教育10 小时前
Vue.config.js中的Webpack配置、优化及多页面应用开发
前端·javascript·vue.js·webpack·uni-app·北京百思教育
百思可瑞教育21 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
风早爽太1 天前
在uni-app中使用lottie-web来展示Lottie动画
uni-app
Autumn_yun1 天前
uniapp 实现项目多语言切换
uni-app
懒大王95271 天前
uni-app + Vue3 + EZUIKit.js 播放视频流
开发语言·javascript·uni-app
懒大王95271 天前
uni-app + Vue3 开发展示 echarts 图表
前端·uni-app·echarts
百思可瑞教育1 天前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
jingling5551 天前
uniapp | 快速上手ThorUI组件
前端·笔记·前端框架·uni-app