微信小程序从入坑到放弃之坑十二：navigator无法跳转的坑

微信小程序开发相比其他移动端开发，有其独特的优势，但同时也存在着一些常见的坑。其中之一就是navigator无法跳转的问题。

问题描述

我们在开发小程序时，通常使用navigator组件进行页面之间的跳转。但有时候会出现点击navigator无反应的情况，或者是点击了navigator，虽然导航栏的标题发生了变化，但实际上并没有跳转到指定页面。这个问题出现的情况比较难以预测，有的时候是通过模拟器无法出现跳转效果，有的时候则是在某些特殊的场景下出现。总之，这个问题给开发带来了很大的困扰和不便。

问题分析

这个问题的根本原因是小程序的路由机制和浏览器的路由机制不同。在浏览器中，我们通过URL地址来访问不同的页面，而在小程序中，我们是通过页面的路径来访问不同的页面。对于小程序，页面路径包含两部分：根路径和页面路径。小程序页面的跳转实际上是通过wx.navigateTo的API接口实现的，它会把新页面的路径推入到小程序页面栈中，同时原页面变为后台页面。

关于页面栈，需要明确一点：小程序中，页面栈是针对于单个小程序的，而不是像浏览器那样全局的。可以将页面栈理解为个人浏览器历史记录，里面存储了你访问过的页面记录。由于小程序是单个应用程序，所以页面栈针对于小程序是私有的。

一个典型的小程序路由是这样的：

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

当我们点击一个navigator跳转到另一个页面时，实际上是在小程序页面栈中添加了一条记录。但是，当页面栈的深度超过10层时，再进行跳转操作就会出现上述的问题。这是因为，小程序对页面栈的深度有限制，如果超过了这个限制，就需要通过其他方式来跳转页面，否则会出现navigator无法跳转的情况。

解决方案

在小程序中，如果遇到了navigator无法跳转的情况，可以尝试以下解决方案：

1. 使用wx.redirectTo

wx.redirectTo可以用于关闭当前页面并跳转到应用内的某个页面。它的原理是先关闭当前页面，再跳转到指定页面。这种方式需要注意的是，使用wx.redirectTo会导致当前页面被销毁，因此如果需要返回到前一个页面，就不能使用这种方式。

2. 使用wx.reLaunch

wx.reLaunch可以用于关闭所有页面并跳转到应用内的某个页面，它的原理是先关闭所有页面，再跳转到指定页面。这种方式需要注意的是，使用wx.reLaunch会导致所有页面被销毁，因此如果需要保留页面状态，就不能使用这种方式。

3. 优化页面栈的深度

如果想继续使用wx.navigateTo的方式来实现页面跳转，就需要优化页面栈的深度。可以通过以下方式来优化页面栈的深度：

• 通过wx.navigateBack、wx.reLaunch、wx.redirectTo等API关闭页面，避免无用页面的堆积；
• 在跳转页面时，判断页面栈的深度，当深度超过一定数量时，可以采取通过wx.redirectTo或wx.reLaunch来跳转页面的方式；
• 在小程序中使用组件化开发，避免页面之间的耦合度过高，从而减少页面栈的深度。

总结

在开发小程序的过程中，navigator无法跳转是一个常见的问题。这个问题的根本原因是小程序的路由机制和浏览器的路由机制不同。为了解决这个问题，我们可以使用wx.redirectTo、wx.reLaunch、优化页面栈的深度等方法。在使用wx.navigateTo的方式进行页面跳转时，还需要注意控制页面栈的深度，避免出现问题。