原生微信小程序如何实现vue的beforeRouteLeave钩子函数

Question

原生微信小程序如何实现监听页面返回之前弹出确认取消框 确认再返回 取消则停留在当前页面？ 类似于vue的beforeRouteLeave钩子函数？

Answer 1

以下内容由CHATGPT及笑面虎共同生成、有用望采纳：

---

【您想要解决的问题】： 您提问的目的是想要了解如何在原生微信小程序中实现一个类似于Vue框架中的beforeRouteLeave钩子函数的功能。具体来说，您希望在用户离开当前页面时，能够弹出一个确认取消框，如果用户选择确认，则允许页面返回；如果选择取消，则用户留在当前页面。

【图片内容】： 您上传的图片是一个提示框，显示“您的记录时间少于30分钟，结束后本次记录无效，确定要结束吗？”以及“取消”和“确认”两个选项。这个图片可能是您希望在用户尝试离开页面时显示的确认框的样式参考。

【问题出现原因】： 在原生微信小程序中，页面的返回操作通常是通过物理返回按钮或者调用页面的navigateBack方法来实现的。小程序并没有内置类似Vue中的beforeRouteLeave钩子函数，因此当用户尝试返回时，没有自动的机制来拦截这个操作并弹出确认框。

【问题解决方案】： 为了实现类似beforeRouteLeave的功能，您可以通过监听页面的返回事件，并在事件处理函数中弹出一个自定义的确认框。以下是实现这一功能的步骤：

1. 在页面的onShow生命周期方法中，设置一个全局的定时器，用于记录用户在当前页面的停留时间。
2. 创建一个自定义的确认框组件，用于显示“确定离开”和“取消”选项。
3. 在页面的onBackPress事件中，使用该确认框组件，并根据用户的选择来决定是否执行页面返回操作。

【提供代码】： 以下是一个简化的示例代码，展示了如何在页面中实现上述功能：

// page.js
Page({
  data: {
    timer: null,
  },
  
  onLoad: function() {
    this.setData({
      timer: setTimeout(() => {
        // 执行记录时间的操作
      }, 1000 * 30) // 假设30秒后记录时间
    });
  },
  
  onShow: function() {
    // 可以在这里重置定时器，如果需要的话
  },
  
  onBackPress: function() {
    const that = this;
    if (this.data.timer) {
      wx.showModal({
        title: '提示',
        content: '您的记录时间少于30分钟，确定要结束吗？',
        success(res) {
          if (res.confirm) {
            // 用户点击确定，清除定时器并返回上一页
            clearTimeout(that.data.timer);
            wx.navigateBack();
          } else if (res.cancel) {
            // 用户点击取消，不执行任何操作
            return;
          }
        }
      });
      return true; // 阻止页面默认的返回操作
    }
    return false; // 不阻止页面返回操作
  },
  
  onUnload: function() {
    // 页面卸载时清除定时器
    if (this.data.timer) {
      clearTimeout(this.data.timer);
    }
  },
});

【代码运行方式】： 您需要将上述代码复制到微信小程序的项目中，对应页面的.js文件里。确保您的小程序开发者工具是开启状态，然后在工具中预览该页面，尝试返回操作以测试功能。

【代码预期运行结果】： 当用户在页面上停留时间少于30分钟并尝试返回时，会弹出一个确认框询问用户是否确定要结束。如果用户选择“确定”，页面将返回；如果选择“取消”，则页面将停留在当前页面。

【推荐相关链接】：

• 微信小程序官方文档
• 微信小程序事件处理
• 微信小程序页面生命周期