如何阻止用户点击小程序返回按钮进行返回.md

适用场景

需要用户在当前界面完成所有操作，才允许用户返回界面，否则阻止用户以任何形式返回上一界面

解决方案

以uniapp框架，vue3代码为例，需要在界面业务代码里使用page-container组件

<template>
    <!-- 拦截用户返回事件 -->
    <view v-if="showContainer">
        <page-container
            :show="true"
            :duration="0"
            :z-index="-1"
            custom-style="width: 100vw; height: 100vh; "
            @beforeleave="onBeforeleave"
        >
        </page-container>
    </view>

    <view >
      业务代码
    </view>
</template>

<script setup>
const showContainer = ref(true) // 显示page-container组件
const isStopBack = ref(true) // 默认先拦截

// 解除返回拦截
const _allowBack = () => {
    isStopBack.value = false
    showContainer.value = false
}

// 拦截返回按钮
const onBeforeleave = () => {
    showContainer.value = false // 需要销毁page-container组件

    nextTick(() => {
        // 阻止返回
        if (isStopBack.value) {
            uni.showToast({
                icon: 'none',
                title: '请先完成支付',
            })
            showContainer.value = true  // 重新创建page-container组件
        }
    })
}
</script>