uniapp 监听 小程序页面是否离开

在uni-app中监听小程序页面是否离开可以通过小程序提供的生命周期函数和事件监听来实现。在小程序中，页面的生命周期主要包括 `onLoad`, `onShow`, `onHide`, 和 `onUnload` 等几个函数。其中，`onHide` 函数可以在页面从当前页面切换到其他页面或小程序关闭时被调用，这可以用来判断页面是否离开了。

以下是一个简单的示例代码，展示了如何在uni-app项目中监听页面的离开事件：

// 页面的.js文件
export default {
  data() {
    return {
      // 页面的数据
    };
  },
  onLoad(options) {
    // 页面加载时的初始化工作
  },
  onShow() {
    // 页面显示时触发的函数
  },
  onHide() {
    // 页面隐藏时触发的函数，可以在这里判断页面是否离开了
    console.log('页面即将离开或被其他页面覆盖');
    // 可以在这里执行一些清理工作
  },
  onUnload() {
    // 页面卸载时触发的函数
  }
};

在上述代码中，当页面即将被隐藏，即将跳转到其他页面或者小程序被关闭时，`onHide` 函数会被调用。这个时机通常被用来做一些清理工作，比如停止定时器、取消网络请求等。

相关问题

uniapp 开发微信小程序，怎么在用户离开页面之前 增加一个确认提示框，只有确认了才退出

在 UniApp 开发微信小程序中，为了在用户离开页面前增加确认提示框，你可以利用微信小程序提供的生命周期钩子函数 `onHide()` 和自定义弹窗组件。当用户尝试离开页面时，`onHide()` 函数会被调用。在这个函数里，你可以创建一个弹窗，并处理用户的确认操作。

以下是简单的步骤：

1. 首先，在需要添加确认提示的页面文件中，例如 `index.vue` 中，监听 `onHide` 事件：

<template>
  <view>
    <!-- 页面内容... -->
    <button @tap="handleClose">关闭页面</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleClose() {
      this.showConfirmModal();
    },
  },
  onHide() {
    // 用户点击关闭按钮或直接切换到其他页面
    this.showConfirmModal();
  },
  data() {
    return {
      confirmModalVisible: false, // 存储弹窗是否可见的状态
    };
  },
  components: {
    ConfirmModal, // 自定义的确认弹窗组件
  },
};
</script>

2. 创建一个名为 `ConfirmModal` 的自定义组件，比如 `confirm-modal.vue`：

<template>
  <view v-if="confirmModalVisible" modal bindclose="cancel">
    <view slot="title">确认离开页面?</view>
    <view slot="content">确定要退出吗?</view>
    <button type="primary" block round @click="confirm">确认</button>
    <button type="default" block round @click="cancel">取消</button>
  </view>
</template>

<script>
export default {
  props: {
    confirmModalVisible: { type: Boolean, default: false },
  },
  methods: {
    confirm() {
      // 确认操作，如保存数据或提交事务等
      this.$emit('close'); // 关闭弹窗并允许页面隐藏
    },
    cancel() {
      this.confirmModalVisible = false; // 取消操作，保留当前页面
    },
  },
  onShow() {
    // 弹窗显示时，阻止默认的关闭行为
    this.$once('touchstart', function(e) {
      e.stopPropagation(); 
    });
  },
  onClose() {
    // 弹窗关闭后，执行实际的离开逻辑
    // 这里可以更新 confirmModalVisible 或者调用 onHide 处理
  },
};
</script>

3. 当你在 `handleClose` 或 `onHide` 中调用 `this.showConfirmModal()` 时，弹窗会显示出来。用户点击“确认”将关闭弹窗并允许页面关闭，点击“取消”则保持当前页面。

记得在项目结构中正确引入这两个组件，并且根据实际需求调整相关的业务逻辑。

uniapp页面卸载事件

uniApp是一个基于Vue.js的跨平台框架，它允许开发者构建一次代码，发布到多个平台上，如微信小程序、H5、iOS和Android等。在uniApp中，并没有直接提供像Web端那样的全局window.onunload或beforeunload事件，因为这类事件在某些原生环境可能会被屏蔽，为了保证更好的用户体验和性能。

然而，当用户离开当前页面时，uniApp会触发`onShowChange`生命周期钩子，通过这个钩子你可以检测到页面是否从可见状态变为不可见或者完全关闭。当你希望在页面即将卸载时执行特定操作，可以设置一个条件，在`onShowChange`回调中判断当前页面是否是最后一个活跃页面：

Page({
  onShowChange: function(fromCurrentScene) {
    if (!fromCurrentScene) { // 用户离开当前页面
      // 在这里执行你想在页面卸载前完成的操作
      console.log('页面即将卸载');
      // 可能的操作包括清理定时器、保存数据等
    }
  },
})

需要注意的是，这并不意味着这就是严格的“卸载”事件，因为用户可能会通过其他方式返回到你的应用，比如从历史记录或通知栏。如果你需要更精确地控制页面的关闭流程，可能需要结合其他策略，比如监听系统级别的退出事件。