微信小程序返回拦截

1.自定义顶部，并改写navigateBack

• 修改josn

  "navigationStyle": "custom"
  

• 顶部自定义

  <view @click="back">navigateBack返回</view>
   
   back(){
      uni.navigateBack({
          beforeleave:(next)=>{
              next()//继续跳转
              //next(false)//拦截跳转
              //next(()=>{console.log('nextFn')})//执行方法
              //this.xxxFn=next;//然后再其他方法里面使用this.xxxFn(),也可以跳转
          })
      })
   }
  

• 重写navigateBack

  // 改造navigateBack
  const navigateBackFn=uni.navigateBack
  uni.navigateBack=function(obj){
        
        
      if(obj.beforeleave){
        
        
          const callFn=(res)=>{
        
        
              if(Object.prototype.toString.call(res)=='[object Function]'){
        
        
                  res()
              }else{
        
        
                  if((res || res==undefined) && (''+res)!='null'){
        
        
                      navigateBackFn(obj)
                  }
              }
          }
          obj.beforeleave(callFn)
      }else{
        
        
          navigateBackFn.call(this,obj)
      }
  }
  // uni.navigateBack({
        
        
  // 	beforeleave:(next)=>{
        
        
  // 		next()//继续跳转
  // 		//next(false)//拦截跳转
  // 		//next(()=>{console.log('nextFn')})//执行方法
  // 		//this.xxxFn=next;//然后再其他方法里面使用this.xxxFn(),也可以跳转
  // 	})
  // })
  

2.使用微信提供的page-container

• page-container相关介绍

• 基础库 2.16.0 开始支持，低版本需做兼容处理。

  功能描述:
  
  小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），
  用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。 
  为此提供“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，
  关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。
  

• 代码：

  <view class="content">
      <!-- #ifdef  MP-WEIXIN -->
      <page-container :show='showContainer'   @beforeleave='onBeforeleave' :overlay='false'></page-container>
      <!-- #endif -->
  </view>
  
  data(){
      retun {
          showContainer:true,
      }
  }
  
  onBeforeleave(){
  	this.showContainer=false
      uni.showModal({
          title: '提示',
          content: '是否确定退出页面',
          success:(res)=>{
              if (res.confirm) {
                  uni.navigateBack()
              } else if (res.cancel) {
                  this.showContainer=true
              }
          }
      })
  }
  

• 业务代码需判断 showContainer 状态，控制 page-container 显示或隐藏；

• 当 page-container 显示时，返回操作不会关闭页面，而是关闭 page-container 容器；

• 当 page-container 隐藏时，返回操作则是关闭页面；

• 然后当页面取消跳转是时再次把page-container 显示出来实现下一次的拦截

上面的方法主要是通过uniapp,微信原生小程序可以按照同样的原理修改