揭秘 UniApp 页面跳转背后的故事：探索多维空间的穿梭奥秘

前端

2024-02-22 17:45:16

在 UniApp 开发中，页面跳转是构建应用程序导航和用户体验的关键环节。UniApp 提供了多种页面跳转方式，每种方式都有其特定的应用场景和优缺点。开发者需要根据实际需求选择合适的跳转方式，才能打造出流畅的用户体验。

UniApp 页面跳转的常见方式

UniApp 主要提供了三种页面跳转方式：uni.navigateTo、uni.redirectTo 和 uni.switchTab。

1. uni.navigateTo：保留当前页面，跳转到新页面

uni.navigateTo 是最常用的页面跳转方式。它会将当前页面压入页面栈，然后跳转到目标页面。用户可以通过页面栈返回到之前的页面。

使用场景：

在应用的页面层级结构中进行导航，例如从列表页跳转到详情页。
需要保留用户浏览历史，方便用户返回之前的页面。

示例代码：

uni.navigateTo({
  url: '/pages/detail/detail?id=123'
});

2. uni.redirectTo：关闭当前页面，跳转到新页面

uni.redirectTo 会关闭当前页面，然后跳转到目标页面。用户无法通过页面栈返回到之前的页面。

使用场景：

登录成功后跳转到首页，避免用户通过返回按钮回到登录页面。
需要强制用户进入新的页面流程，例如支付成功后跳转到订单详情页。

示例代码：

uni.redirectTo({
  url: '/pages/index/index'
});

3. uni.switchTab：切换底部标签页

uni.switchTab 专门用于切换底部标签页（tabBar）。它会关闭所有非 tabBar 页面，然后跳转到指定的 tabBar 页面。

使用场景：

在应用的不同模块之间进行切换，例如从首页切换到我的页面。

示例代码：

uni.switchTab({
  url: '/pages/my/my'
});

页面跳转的参数传递

在进行页面跳转时，我们经常需要将数据从一个页面传递到另一个页面。UniApp 提供了两种参数传递方式：

1. URL 参数传递

URL 参数传递是最简单直接的方式。我们将参数拼接到 URL 后面，目标页面可以通过 onLoad 生命周期函数获取到这些参数。

示例代码：

// 跳转页面
uni.navigateTo({
  url: '/pages/detail/detail?id=123&name=abc'
});

// 目标页面获取参数
onLoad(options) {
  console.log(options.id); // 123
  console.log(options.name); // abc
}

2. 使用 uni.navigateTo、uni.redirectTo 的 success 回调函数传递

这种方式可以传递更复杂的数据，例如对象或数组。

示例代码：

// 跳转页面
uni.navigateTo({
  url: '/pages/detail/detail',
  success: (res) => {
    res.eventChannel.emit('acceptDataFromPreviousPage', { data: { id: 123, name: 'abc' } });
  }
});

// 目标页面获取参数
onLoad() {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.on('acceptDataFromPreviousPage', (data) => {
    console.log(data.id); // 123
    console.log(data.name); // abc
  });
}