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 中测试有效,其他的没有测试

相关推荐
2501_916007472 小时前
iOS 26 软件性能测试 新版系统下评估全流程 + 多工具辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
xiaohe06012 小时前
🎉 Uni ECharts 2.0 正式发布:原来在 uni-app 中使用 ECharts 可以如此简单!
uni-app·echarts
00后程序员张2 小时前
Swoole HTTPS 实战,在生产环境部署、性能权衡与排查流程
后端·ios·小程序·https·uni-app·iphone·swoole
2501_915909066 小时前
iOS App 上架全流程详解:证书配置、打包上传、审核技巧与跨平台上架工具 开心上架 实践
android·ios·小程序·https·uni-app·iphone·webview
2501_915106326 小时前
iOS 26 系统流畅度测试实战分享,多工具组合辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915918416 小时前
开发 iOS 应用全流程指南,环境搭建、证书配置与跨平台使用 开心上架 上架AppStore
android·ios·小程序·https·uni-app·iphone·webview
2501_9159214314 小时前
iOS 是开源的吗?苹果系统的封闭与开放边界全解析(含开发与开心上架(Appuploader)实战)
android·ios·小程序·uni-app·开源·iphone·webview
2501_9159090618 小时前
原生 iOS 开发全流程实战,Swift 技术栈、工程结构、自动化上传与上架发布指南
android·ios·小程序·uni-app·自动化·iphone·swift
2501_9151063218 小时前
Comodo HTTPS 在工程中的部署与排查实战(证书链、兼容性与真机抓包策略)
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159090618 小时前
苹果软件混淆与 iOS 代码加固趋势,IPA 加密、应用防反编译与无源码保护的工程化演进
android·ios·小程序·https·uni-app·iphone·webview