知识小屋

    微信小程序返回事件监听

    wx.enableAlertBeforeUnload 这是微信小程序官方提供的标准解决方案。它会在用户尝试离开页面时（无论是点击左上角、侧滑还是物理返回键），自动弹出一个系统样式的第二个确认框。

    特点：

    • 覆盖全部：完美覆盖安卓/iOS物理返回、侧滑、左上角返回。

    • 限制：弹窗样式由微信决定，无法自定义UI（只能修改提示文字），且按钮通常是“取消”和“离开”。

    import { onLoad, onUnload } from '@dcloudio/uni-app'

onLoad(() => {
  // #ifdef  MP-WEIXIN
  uni.enableAlertBeforeUnload({
    message: '确定要退出吗？',
    success: function (res) {
      console.log('配置成功：', res)
    },
    fail: function (err) {
      console.error('配置失败：', err)
    }
  })
  // #endif
})

onUnload(() => {
  // #ifdef  MP-WEIXIN
  uni.disableAlertBeforeUnload()
  // #endif
})

    bug

    wx.enableAlertBeforeUnloadapi在支持左滑返回的机型下不生效，所以不推荐使用，兼容性太差，官方开发者社区也没有修复这个问题。

    解决方案:page-container

    <template>
  <!-- #ifdef MP-WEIXIN -->
  <page-container
    v-if="showLeaveIntercept"
    :show="showLeaveIntercept"
    :overlay="false"
    @beforeleave="handleBeforeLeave"
  ></page-container>
  <!-- #endif -->
</template>
<script setup>
import { ref } from 'vue'

const showLeaveIntercept = ref(true)

function handleBeforeLeave() {
  showLeaveIntercept.value = false
  uni.showModal({
    title: '提示',
    content: '确定要退出吗？',
    success: function (res) {
      if (res.confirm) {
        uni.navigateBack()
      } else {
        showLeaveIntercept.value = true
      }
    }
  })
}
</script>