HarmonyOS 鸿蒙Next 如何在页面用户点击返回时弹出确认框

拦截主要看是否是navigation包裹的页面

1、如果用的是navigation做路由跳转

此时需要给NavDestination的onBackPressed()回调中绑定弹窗事件，返回true表示自己处理返回逻辑不进行页面路由，而用户在点击对话框中的确认时，则可以调用NavPathStack.pop()来在主动退出该页面

可以参考下面的demo (只针对拦截和弹窗）：

@Component
struct PageOne {
  pageInfos: NavPathStack = new NavPathStack()

  build() {
    NavDestination(){...}.title('pageOne')
    .onBackPressed(() => {
      AlertDialog.show(
        {
          title: '确定返回', // 标题
          message: '是否要返回?', // 内容
          autoCancel: false, // 点击遮障层时，是否关闭弹窗。
          alignment: DialogAlignment.Bottom, // 弹窗在竖直方向的对齐方式
          offset: { dx: 0, dy: -20 }, // 弹窗相对alignment位置的偏移量
          primaryButton: {
            value: '取消',
            action: () => {
              console.info('取消');
            }
          },
          secondaryButton: {
            value: '确定',
            fontColor: '#D94838',
            action: () => {
              console.info('确认返回');
              this.pageInfos.pop()
            }
          },
          cancel: () => { // 点击遮障层关闭dialog时的回调
            console.info('Closed callbacks');
          }
        }
      )
      return true
    })
    .onReady((context: NavDestinationContext) => {
      this.pageInfos = context.pathStack
    })
  }
}

2、如果是@Entry修饰的页面

@Entry修饰的页面拦截用户返回事件以弹出对话框这个可以用自定义组件的生命周期中的onBackPress来拦截。这个生命周期函数返回true表示页面自己处理返回逻辑，不进行页面路由；返回false表示使用默认的路由返回逻辑，不设置返回值按照false处理。所以我们在这个生命周期函数中调用一个弹出对话框，再返回ture就可以实现拦截用户返回事件以弹出对话框，而用户在点击对话框中的确认时，如果是使用的router做路由则调用router.back()函数就可以来退出该页面

参考下面的demo：

[@Entry](/user/Entry)
@Component
struct PageOne {
  // 只有被[@Entry](/user/Entry)装饰的组件才可以调用页面的生命周期
  onBackPress() {
    console.info('Index onBackPres这是返回来了吗');
    AlertDialog.show(
      {
        title: '确定返回', // 标题
        message: '是否要返回?', // 内容
        autoCancel: false, // 点击遮障层时，是否关闭弹窗。
        alignment: DialogAlignment.Bottom, // 弹窗在竖直方向的对齐方式
        offset: { dx: 0, dy: -20 }, // 弹窗相对alignment位置的偏移量
        primaryButton: {
          value: '取消',
          action: () => {
            console.info('确认取消');
          }
        },
        secondaryButton: {
          value: '确定',
          fontColor: '#D94838',
          action: () => {
            console.info('确认返回后调用router.back');
            router.back()
          }
        },
        cancel: () => { // 点击遮障层关闭dialog时的回调
          console.info('Closed callbacks');
        }
      }
    )
    return true // 返回true表示页面自己处理返回逻辑，不进行页面路由；返回false表示使用默认的路由返回逻辑，不设置返回值按照false处理
  }

  build() {...}
}