文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序阻止小程序返回的两种方法

2023-05-17 08:55

关注

本次项目为uniapp开发,原生小程序也可以参考这两个方法。

方法1:

wx.enableAlertBeforeUnload

onLoad中声明

wx.enableAlertBeforeUnload({
	message: '请您填写数据',
	success:()=>{}
})

优点:简单方便

缺点:无法自定义样式、按钮文字及样式

方法2:

page-container

这是一个类似弹框的组件,具体参数可以去官网查看。

返回操作包括:顶部导航、右滑手势、安卓物理返回键和调用 navigateBack 接口

优点:可以自定义返回框

<template>
<view>
	<text>测试阻止返回的页面</text>
	<!-- 阻止返回 -->
	//注意一定要用v-if 才可以,不然即使showPage1设置为false,第二次也会直接返回
	<view class="" v-if="showPage1">
		<page-container :show="showPage1" :overlay="false"  @beforeleave="beforeleave('showPage1')"></page-container>
	</view>
</view>
</template>
//数据及方法
data(){
	return {
		showPage1: true   //一开始设置为显示
	}
},
methods: {
	beforeleave(){
		this.showPage1 = false  //这个很重要,一定要先把弹框删除掉
		uni.showModal({
			title: `确定要退出吗`,
			success: (e)=>{
				if(e.confirm) {
				//判断是上一个页面进入(返回),还是直接进入这个页面(回首页)
					let pages = getCurrentPages()
					if(pages.length == 1){
						uni.switchTab({
							url: '/pages/index/index'
						})
					}else {
						uni.navigateBack(1)
					}
				}else {
					//点取消,生成新的弹框
					this.showPage1 = true
				}
			},
		})
	}
}

后语:对于page-container原理的个人理解

网上、官网上很多人只提到了这种方法可以解决阻止返回问题,却没有很好的说明,导致很多朋友在使用时并没有达到预期效果。下面这个简单理解希望可以帮助到大家。

可以简单理解为在页面生成page-container时会通知小程序需要监听用户返回操作,并且阻止返回一次。

当用户做了返回操作后,小程序执行了阻止返回,然后移除了监听,所以接着再做一次返回操作就直接返回了。

所以要达到不点击确定返回,下一次做返回操作时依旧要阻止,就可以在每次返回点取消时候,移除page-container,再重新生成一个page-container,这时就又会重新通知小程序监听返回一次,所以上文用的是v-if

总结

到此这篇关于微信小程序阻止小程序返回的两种方法的文章就介绍到这了,更多相关阻止小程序返回内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯