返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序阻止小程序返回的两种方法
  • 350
分享到

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

摘要

目录方法1:方法2:后语:对于page-container原理的个人理解总结本次项目为uniapp开发,原生小程序也可以参考这两个方法。 方法1: wx.enableAlertBef

本次项目为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

总结

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

--结束END--

本文标题: 微信小程序阻止小程序返回的两种方法

本文链接: https://lsjlt.com/news/210946.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 微信小程序阻止小程序返回的两种方法
    目录方法1:方法2:后语:对于page-container原理的个人理解总结本次项目为uniapp开发,原生小程序也可以参考这两个方法。 方法1: wx.enableAlertBef...
    99+
    2023-05-17
    阻止小程序返回怎么设置 微信小程序阻止返回 禁止小程序跳转
  • 微信小程序 -- 阻止小程序返回
    本次项目为uniapp开发,原生小程序也可以参考这两个方法。 方法1: wx.enableAlertBeforeUnload onLoad中声明 wx.enableAlertBeforeUnload(...
    99+
    2023-09-11
    微信小程序 小程序 前端
  • 微信小程序阻止页面返回(包滑动、自动返回键)
    这个场景还是挺有意思的,比如某多多,只要你点左上角的返回 好家伙,满满又 花不了 的优惠券就来了,让你拥有一种消费最划算的感觉。 如果你的场景比较简单,只是对左上角的返回进行监听,只需要关闭自带的导航栏,手写导航栏或用ui库的写好的导航栏就...
    99+
    2023-09-12
    微信小程序 小程序 vue.js 前端 vue
  • 微信小程序返回上一页的各种方法
    微信小程序返回上一页的各种方法 1. navigator 这是最常见的一种跳转方式,相当于html里的a标签。但需要注意的是 该方法不能跳转tabbar页面,保留当前页面,在wxml使用 内容 2. wx.navigateTo 通过构造js...
    99+
    2023-08-19
    微信小程序 javascript 小程序 前端
  • 微信小程序如何禁止页面返回
    微信小程序禁止页面返回的案例:微信小程序中不允许用户返回上一页的操作代码。//用wx.redirectTo来做跳转页面wx.redirectTo({url: '/pages/index/index'})移动端小程序...
    99+
    2024-04-02
  • 小程序阻止手机自带的滑动返回退出事件(uni-app,微信小程序,page-container)
    1、使用page-container前先在pages.json配置(重点!) "usingConponents":{"page-container":"/pages/detail/detail"}, ...
    99+
    2023-09-10
    小程序 uni-app 微信小程序
  • 微信小程序返回上一页的各种方法实例
    目录一、方法罗列二、讲解三、常用案例四、总结补充:微信小程序如何返回上一个页面并刷新上一个页面总结返回上一页,一共有4中方法,每种方法都有不一样细节 一、方法罗列 函数说明navig...
    99+
    2024-04-02
  • 小程序监听返回、阻止页面返回、弹框后禁止返回
    需求: 在页面内弹出半屏的弹窗或在页面内加载一个全屏的子页面时,用户进行返回操作会直接离开当前页面,不符合用户预期,预期应为关闭当前弹出的组件。 为此官方提供“page-container”容器组件,效果类似于 popup弹出层,页面内...
    99+
    2023-08-18
    小程序 前端
  • 微信小程序怎么返回数据
    本文小编为大家详细介绍“微信小程序怎么返回数据”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序怎么返回数据”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。数据分析接口开发者通过数据分析接口,可获取到小程序...
    99+
    2023-06-26
  • 在微信小程序中怎样阻止冒泡事件?
    在微信小程序当中,当两个包含的视图都使用了bindtap函数来绑定点击事件的话,就会发生冒泡事件(即点击内部事件时将同时触发外部事件),如果我们要想阻止冒泡事件的发生,将被包含在内部的bindtap该为catchtap即可,下面请看具...
    99+
    2023-10-11
    微信小程序 小程序 微信 Powered by 金山文档
  • 微信小程序页面返回操作拦截
    返回操作包括三种情形,右滑手势、安卓物理返回键和调用 navigateBack 接口 微信小程序没有提供类似 onBackPress 监听页面返回的api,在某些特定场景下,业务收到了限制 为了解决这...
    99+
    2023-09-07
    微信小程序 小程序
  • 微信小程序 | 小程序开发
    🖥️ 微信小程序专栏:小程序开发 初级知识 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫...
    99+
    2023-09-08
    微信小程序 小程序
  • 微信小程序--小程序框架
    目录 前言:  一.框架基本介绍 1.整体结构: 2.页面结构: 3.生命周期: 4.事件系统: 5.数据绑定: 6.组件系统: 7.API: 8.路由: 9.模块化: 10.全局配置: 二.视图层详解 1.WXML(WeiXin Mar...
    99+
    2023-10-20
    小程序 微信小程序
  • 微信小程序开发之获取用户信息的两种方法
    今天介绍两种微信小程序获取用户信息的方法 第一中直接授权获取(在同一页面之中): 首先在微信程序一个页面的WXML文件写入获取用户信息的按钮 <!-- bindTap用于绑定事...
    99+
    2024-04-02
  • uniapp微信小程序左上角返回按钮的监听方法
    这篇文章主要介绍“uniapp微信小程序左上角返回按钮的监听方法”,在日常操作中,相信很多人在uniapp微信小程序左上角返回按钮的监听方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”uniapp微信小程序...
    99+
    2023-06-30
  • 微信小程序页面返回传值的4种解决方案汇总
    目录使用场景解决方案1、使用globalData实现2、使用本地缓存Storage实现3、使用小程序的Page页面栈实现4、使用wx.navigateTo API的events实现总...
    99+
    2024-04-02
  • 微信小程序比较两个数大小的实现方法
    目录效果图wxml代码wxss代码index.js代码总结效果图 wxml代码 <!--index.wxml--> <view class="demo-box"...
    99+
    2024-04-02
  • 微信小程序的开发方法
    本篇内容主要讲解“微信小程序的开发方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序的开发方法”吧!1、准备工作用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 , 根据指...
    99+
    2023-06-29
  • 微信小程序运营的方法
    这篇文章主要介绍了微信小程序运营的方法的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序运营的方法文章都会有所收获,下面我们一起来看看吧。  1、装饰打造  用一个例子来说明,比如一家服装店。某服装店为了...
    99+
    2023-06-26
  • 微信小程序注册的方法
    这篇文章主要介绍“微信小程序注册的方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序注册的方法”文章能帮助大家解决问题。方式一:通过微信公众号(已认证的企业类型)快速注册快速注册认证小程序...
    99+
    2023-06-26
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作