uniapp小程序和app端阻止用户退出页面,包含导航栏,手机自带返回键

当用户进行以下操作时，会触发该函数：

• Android 实体返回键 (from = backbutton)
• 顶部导航栏左边的返回按钮 (from = backbutton)
• 返回 API，即 uni.navigateBack() (from = navigateBack)
• 以上三种方式都会触发下发函数,效果如下

<template>
	<view>
<!-- 用户取消付款弹窗 -->
    <u-modal v-model="showQuitModel" title="需要取消支付吗?" content="订单库存将最多为您保留30分钟,记得尽快完成知道~" confirm-text="继续支付" cancel-text="取消支付" show-cancel-button @confirm="confirmQuitModel" @cancel="cancelQuitModel"></u-modal>
    

<!-- 微信小程序控制返回的组件 -->  
<!-- #ifdef MP-WEIXIN -->
	<view class="" v-if="showPageCont">
        <page-container :show="showPageCont" :overlay="false"  @beforeleave="beforeleave"></page-container>
	</view>
<!-- #endif -->
	</view>
</template>

<script>
    export default {
	data() {
            return {
               showPageCont:true,//page-container组件默认需要为true
               showQuitModel:false,
            }
        },
        // 处理app端用户返回时触发弹出功能
        onBackPress() {
               this.showQuitModel = true;
               //返回true阻止默认返回事件,改成弹窗
               return true
        },
        methods: {
			// 处理小程序端用户返回时触发弹出功能
			beforeleave(){
				console.log("触发beforeleave");
				this.showQuitModel = true;
			},
			// 重置page-content参数,确保可以使用,点击确定按钮依旧在这个页面不退出
			confirmQuitModel(){
				this.showPageCont = false;
				setTimeout(()=>{
					this.showPageCont=true
					this.showQuitModel = false;
				},10)
			},
                        //点击取消按钮跳转其他页面
			cancelQuitModel(){
				this.showPageCont = false;
				this.showQuitModel = false;
				uni.redirectTo({
					url:"/shopPackage/pages/order/virtualOrder/virtualOrder"
				})
			},
                        }
   }
</script>