美文网首页
微信小程序 / UNIAPP --- 阻止小程序返回(顶部导航栏

微信小程序 / UNIAPP --- 阻止小程序返回(顶部导航栏

作者: 梅先森森森森森森 | 来源:发表于2023-05-09 11:37 被阅读0次
    本人项目为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。

    相关文章

      网友评论

          本文标题:微信小程序 / UNIAPP --- 阻止小程序返回(顶部导航栏

          本文链接:https://www.haomeiwen.com/subject/jwyrsdtx.html