一文读懂 Uniapp 内外页面跳转妙招，畅游原生与 H5

2023-10-27 08:39:49

Uniapp 内外页面跳转指南：畅游多端应用

作为一名 Uniapp 开发者，掌控页面跳转技巧至关重要，它能让你轻松构建交互性强、流畅的多端应用。这份全面的指南将深入探讨 Uniapp 内外页面的跳转方式，扫清你开发道路上的障碍。

1. 掌握路由类型，轻松跳转页面

1.1 默认跳转：navigateTo

当需要在页面间平滑过渡时，navigateTo 方法派上用场。它就像水流般顺畅，将用户无缝带至目标页面。

uni.navigateTo({
  url: '/pages/detail/index',
});

1.2 重定向跳转：redirectTo

另一种跳转方式是重定向，它能让用户到达新页面后，之前的页面不复存在，就像从未出现过。redirectTo 方法可实现此功能。

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

2. 链接类型选择，灵活跳转网页

2.1 Uniapp 原生链接：畅游原生应用

若要跳转到另一个 Uniapp 原生页面，请使用 Uniapp 原生链接。例如：

uni.navigateTo({
  url: '/pages/detail/index',
});

2.2 H5 链接：跨越平台边界

要跳转到外部 H5 网页，使用 H5 链接即可。例如：

uni.navigateTo({
  url: 'https://www.example.com',
});

3. 登陆需求判断，确保安全跳转

某些情况下，跳转到特定页面可能需要用户先登录，以保证数据安全。此时，需要在跳转前判断用户登录状态，若未登录则引导其先登录。

3.1 需要登录：needToken 为 true

if (needToken) {
  // 判断用户是否已登录
  if (!uni.getStorageSync('token')) {
    // 跳转到登录页面
    uni.navigateTo({
      url: '/pages/login/index',
    });
  } else {
    // 已登录，跳转到目标页面
    uni.navigateTo({
      url: '/pages/detail/index',
    });
  }
}

3.2 不需要登录：needToken 为 false

if (!needToken) {
  // 无需登录，直接跳转到目标页面
  uni.navigateTo({
    url: '/pages/detail/index',
  });
}

4. 常见问题解答

Q：如何关闭当前页面？
A：使用 uni.navigateBack() 方法。
Q：如何跳转到指定的 tab 页面？
A：使用 uni.switchTab() 方法，并指定 tabBar 的 index 值。
Q：如何使用 query 参数跳转页面？
A：在 url 中添加 ?query=value，例如：uni.navigateTo({url: '/pages/detail/index?id=1'})。
Q：如何监听页面跳转事件？
A：监听 uni.onNavigateTo() 和 uni.onNavigateBack() 事件。
Q：如何使用动画跳转页面？
A：在 navigateTo 和 redirectTo 方法中指定动画类型，例如：uni.navigateTo({url: '/pages/detail/index', animationType: 'slide-in-right'})。