微信小程序传参回退首页，去除左上角返回键

2024-01-22 11:34:06

在小程序中不显示返回键回退到首页

在小程序开发中，需要在不同页面之间传递参数并回退到之前的页面是常见操作。默认情况下，小程序左上角会保留一个返回键，这可能会干扰用户体验，尤其是当需要直接回退到首页时。本文将介绍一种方法，通过使用 wx.navigateBack API 的 delta 参数，可以在不显示左上角返回键的情况下，将用户直接回退到小程序首页。

1. 使用 `wx.navigateBack` API

wx.navigateBack API 用于在小程序页面之间进行回退操作。它接受一个 delta 参数，该参数指定要回退的页面数。例如，将 delta 设置为 1 将回退到上一个页面，将 delta 设置为 2 将回退到上两个页面，依此类推。

要直接回退到小程序首页，我们需要使用 getCurrentPages API 获取当前页面栈。当前页面栈是一个数组，其中包含当前打开的所有页面。要获取首页，我们需要获取页面栈中的第一个页面，即数组中的第一个元素。

// 获取当前页面栈
const pages = getCurrentPages();

// 获取首页
const homePage = pages[0];

// 使用 delta 回退到首页
wx.navigateBack({
  delta: homePage.route ? pages.length - 1 : pages.length,
});

在上面的代码中，我们首先使用 getCurrentPages API 获取当前页面栈。然后，我们检查首页是否有 route 属性。如果首页有 route 属性，则表示首页不是小程序的启动页，我们需要回退 pages.length - 1 个页面才能到达首页。否则，如果首页没有 route 属性，则表示首页是小程序的启动页，我们需要回退 pages.length 个页面才能到达首页。

2. 隐藏左上角返回键

为了隐藏左上角返回键，我们需要使用 wx.hideHomeButton API。这个 API 接受一个 success 回调函数，当成功隐藏返回键时调用。

// 隐藏左上角返回键
wx.hideHomeButton({
  success: () => {
    console.log('返回键已隐藏');
  },
});

3. 完整代码示例

将上面讨论的两种方法结合起来，我们可以得到一个完整的代码示例，用于在不显示左上角返回键的情况下，将用户直接回退到小程序首页：

// 获取当前页面栈
const pages = getCurrentPages();

// 获取首页
const homePage = pages[0];

// 使用 delta 回退到首页
wx.navigateBack({
  delta: homePage.route ? pages.length - 1 : pages.length,
});

// 隐藏左上角返回键
wx.hideHomeButton({
  success: () => {
    console.log('返回键已隐藏');
  },
});