网站建设手机版优化资讯
背景：
使用uniapp 开发安卓app，在用户编辑后直接返回时，使用弹窗提醒用户：还没有保存，是否保存？
方案
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 中测试有效，其他的没有测试