0


微信小程序 -- 阻止小程序返回

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


本文转载自: https://blog.csdn.net/LiuPangZi6/article/details/129316036
版权归原作者 胖子liu 所有, 如有侵权,请联系我们删除。

“微信小程序 -- 阻止小程序返回”的评论:

还没有评论