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

超、凢脫俗 2023-09-27 20:18 119阅读 0赞

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

**wx.enableAlertBeforeUnload**

onLoad中声明

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

优点：简单方便

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

**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
                    }
                },
            })
        }
    }