本人项目为uniapp开发，原生小程序也可以参考这两个方法。
方法1：
wx.enableAlertBeforeUnload
- 实现功能：拦截页面返回，返回上页前弹出询问对话框
- 文档地址：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.enableAlertBeforeUnload.html
- 优点：简单方便
- 缺点：无法自定义样式、按钮文字及样式
文档说明
代码示例
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。
