uni-app微信小程序页面跳转技巧总结

在小程序开发中，页面跳转是高频操作，但如果不注意跳转方式，可能会遇到跳转失效的问题！以下是常见跳转方式及其适用场景：

1. uni.navigateTo

   • 保留当前页面，跳转到新页面。
   • 注意：小程序中页面栈最多 10 层，频繁跳转会失效。
   • 适用场景：需要保留当前页面的跳转，适合层级较少的页面跳转。

2. uni.redirectTo

   • 关闭当前页面，跳转到新页面。
   • 适用场景：不相关的页面跳转，避免页面栈堆积。

3. uni.reLaunch

   • 关闭所有页面，打开新页面。
   • 适用场景：重置页面栈，适合重新加载整个应用。

4. uni.switchTab

   • 跳转到 tabBar 页面，关闭其他非 tabBar 页面。
   • 适用场景：切换底部导航栏页面。

5. uni.navigateBack

   • 返回上一页面或多级页面。
   • 适用场景：返回操作。

---

常见问题及解决方案 

1. 跳转失效

   • 原因：uni.navigateTo 跳转次数过多，页面栈达到 10 层限制。
   • 解决：使用 uni.redirectTo 或 uni.reLaunch 替代。

2. 返回到指定页面

   • 使用 uni.switchTab 或 uni.reLaunch 实现。
   • 示例代码

onBackPress(event) {
    uni.switchTab({
        url: '/pages/tab/my/my'
    });
    return true;
}

 

总结 

• 层级跳转：优先使用 uni.navigateTo，但注意页面栈限制。
• 不相关页面跳转：使用 uni.redirectTo 避免页面栈堆积。
• 重置页面栈：使用 uni.reLaunch 或 uni.switchTab。