微信小程序 / UNIAPP --- 阻止小程序返回(顶部导航栏返回、左 / 右滑手势、安卓物理返回键和调用 navigateBack 接口)

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

方法1:

wx.enableAlertBeforeUnload

文档说明

代码示例

onLoad: function(){
    wx.enableAlertBeforeUnload({
      message: "返回上页时弹出对话框",
      success: function (res) {
        console.log("方法注册成功:", res);
      },
      fail: function (errMsg) {
        console.log("方法注册失败:", errMsg);
      },
    });
}

效果图

实现效果

方法2:

page-container

  • 这是一个类似弹框的组件,具体参数可以去官网查看。
  • 返回操作包括:顶部导航、右滑手势、安卓物理返回键和调用 navigateBack 接口
  • 优点:可以自定义返回框
<template>
    <view>
        <text>测试阻止返回的页面</text>
        <!-- 阻止返回 -->
        <!--注意一定要用v-if 才可以,不然即使showPage1设置为false,第二次也会直接返回-->
        <view v-if="isShow">
            <page-container :show="isShow" :overlay="false" @beforeleave="beforeleave"></page-container>
        </view>
    </view>
</template>
<script>
    export default {
        onLoad(){
            
        },
        data(){
            return {
                isShow: true   //一开始设置为显示
            }
        },
        methods: {
            beforeleave(){
                this.isShow = false;  //这个很重要,一定要先把弹框删除掉
                uni.showModal({
                    title: "确定要退出吗",
                    success: (e)=>{
                        if(e.confirm) {
                            //判断是上一个页面进入(返回),还是直接进入这个页面(回首页)
                            let pages = getCurrentPages();
                            if(pages.length === 1){
                                // 返回到首页
                                uni.switchTab({
                                    url: "/pages/index'"
                                });
                            }else {
                                // 返回上一页
                                uni.navigateBack({
                                    delta: 1
                                })
                            }
                        }else {
                            //点取消,生成新的弹框
                            this.isShow = true;
                        }
                    }
                })
            }
        }
    }
</script>

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

网上、官网上很多人只提到了这种方法可以解决阻止返回问题,却没有很好的说明,导致很多朋友在使用时并没有达到预期效果。下面这个简单理解希望可以帮助到大家。
可以简单理解为在页面生成page-container时会通知小程序需要监听用户返回操作,并且阻止返回一次。
当用户做了返回操作后,小程序执行了阻止返回,然后移除了监听,所以接着再做一次返回操作就直接返回了。
所以要达到不点击确定返回,下一次做返回操作时依旧要阻止,就可以在每次返回点取消时候,移除page-container,再重新生成一个page-container,这时就又会重新通知小程序监听返回一次,所以上文用的是v-if。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容

  • 最近几个月因为公司的业务需求,一直在折腾小程序,从开始的完全不熟悉,到后面被各种坑折磨,是时候写一篇总结了,避免下...
    ArmorVon阅读 1,912评论 1 1
  • 小程序巧应用,微信小程序开发实战 配置 app.json pages -> 所有的页面 window -> 窗口的...
    Anancncn阅读 570评论 0 1
  • 0、杂记 0.1、在实际的开发中,图片资源不会存储在小程序的目录中,因为小程序的大小不能超过1MB(现在改为2M)...
    it筱竹阅读 5,478评论 0 10
  • 一,注册微信小程序 1.打开 微信公众平台[https://mp.weixin.qq.com/cgi-bin/lo...
    虚幻的锈色阅读 1,236评论 0 2
  • 逻辑层 逻辑层,是事务逻辑处理的地方。对于微信小程序而言,逻辑层就是所有.js脚本文件的集合。微信小程序在逻辑层将...
    勇敢的_心_阅读 1,136评论 0 2