微信小程序开发详解，轻松实现页面跳转

微信小程序开发这事儿，说难不难，说简单也不简单。尤其是页面跳转，很多新手一开始就被这个坎儿绊住了。我见过太多人，明明代码写对了，结果跳转就是没反应，或者跳过去了，但页面乱成一团。其实，页面跳转就是小程序里最基础、也最核心的技能——你不可能让用户永远待在一个页面上，对吧？就像你逛商场，得有人指引你去不同楼层。今天咱们就掰扯掰扯，怎么让小程序里的页面跳转变得跟翻书一样自然。

先说最常用的`wx.navigateTo`。这玩意儿就像你从一楼坐电梯去五楼，能保留当前页面，但新页面会盖在上面。很多人第一次用的时候，会犯一个低级错误：忘了在`app.json`里注册页面路径。你写了跳转代码，但系统压根不认识那个页面，就像你告诉司机去一个他没听过的小区。正确的做法是，跳转前先确认路径写对了，比如`wx.navigateTo({ url: '/pages/detail?id=1' })`。路径前面一定要加斜杠，这是规矩。另外，`navigateTo`有个坑：它只能跳转到非tabBar页面。如果你硬要跳转到底部导航栏里的页面，它就会罢工。这时候就得用`wx.switchTab`，这就像你从商场内部直接走到另一个大门，而不是坐电梯。

说到`wx.switchTab`，它专治tabBar跳转的疑难杂症。比如你有个首页、分类、购物车三个底部标签，想从购物车跳到首页，用`navigateTo`铁定不行，因为tabBar页面是并行的，不是层级关系。`switchTab`的写法也简单：`wx.switchTab({ url: '/pages/index' })`。但有个细节很多人忽略：`switchTab`不会保留当前页面的状态。你从购物车跳到首页，购物车页面的数据会销毁，再回来就得重新加载。如果你想让用户保留购物车里的东西，就得用全局变量或者缓存。还有一个坑是，`switchTab`不支持传参。你想带个参数过去？没门儿。这时候就得另辟蹊径，比如用全局变量或者`getCurrentPages`来曲线救国。

再来说说`wx.redirectTo`，这玩意儿有点像你坐电梯上了五楼，但一楼的门直接关了，回不去了。它用来关闭当前页面，然后打开新页面。比如用户登录成功后，你肯定不想让他再回到登录页，这时候`redirectTo`就派上用场了。用法和`navigateTo`差不多，只是行为不同。但有个地方得注意：`redirectTo`只能跳转到非tabBar页面，而且它不会在导航历史里留下记录。如果你用`navigateTo`跳了三个页面，用户按返回键能一步一步回去；但用`redirectTo`跳了三个页面，返回键就直接回到最开始的页面了。很多开发者用这个来做表单提交后的跳转，防止用户重复提交，这招确实聪明。

`wx.reLaunch`是个狠角色，它会把所有页面都关掉，只留下新页面。就像你清理了整个浏览记录，然后打开一个新页面。这用在什么场景？比如用户退出登录，你。`wx.reLaunch({ url: '/pages/index' })`就能搞定。但它有个限制：跳转的页面必须是应用内的页面，不能跳转到外部链接。如果你非要跳外部，就得用`web-view`组件。另外，`reLaunch`也会清空页面栈，所以如果你在某个页面存了全局变量，跳转后这些变量还在，但页面实例没了。这算是个小陷阱，很多新手因此丢数据。

除了这些官方API，页面跳转还有个隐藏技能：组件跳转。比如``标签，它跟`wx.navigateTo`功能一样，但写法更直观。你在wxml里写`去详情`，用户点击就能跳转。这比在js里写事件监听省事多了，尤其适合列表页的每个条目。但注意，`navigator`也有自己的属性，比如`open-type`，可以指定是`navigate`、`redirect`还是`switchTab`。如果你不加`open-type`，默认就是`navigate`。很多新手不知道这个，直接写个`navigator`就以为能跳tabBar页面，结果死活不跳，气得直拍桌子。

说到传参，这是页面跳转里的老难题。你用`navigateTo`跳转时，可以在URL后面加参数，比如`id=1&name=test`。然后在目标页面的`onLoad`里通过`options`接收。但参数有长度限制，而且只能传字符串。如果你要传对象，得先`JSON.stringify`一下，到了目标页面再`JSON.parse`回来。还有个坑：参数里如果有中文或特殊字符，得用`encodeURIComponent`编码，否则可能乱码。我见过一个项目，传用户昵称时没编码，结果昵称里有“&”符号，直接把参数截断了，页面跳过去全是乱码。所以传参这事儿，越谨慎越好。

页面跳转还有个常被忽略的点：性能。如果你用`navigateTo`无限跳转，页面栈会越堆越深，微信官方规定最多只能存10个页面。超过10个，再跳就报错。所以你得控制跳转深度，或者用`redirectTo`来替换页面。还有一个技巧是，利用`getCurrentPages`获取当前页面栈，判断页面数量，然后决定用哪种跳转方式。比如当页面栈超过5个时，自动用`redirectTo`替换当前页面，这样既能保持流畅，又不会报错。很多电商小程序就是这么设计的，用户逛商品详情页逛得深了，系统自动用替换模式，防止卡死。

说说页面跳转的视觉体验。跳转时，微信默认有个从右往左的动画，但你也可以自定义。在`wx.navigateTo`的`animationType`属性里，可以设置`slide-in-right`、`slide-in-left`、`fade-in`等动画效果。比如你想让页面像翻书一样从左边进来，就用`slide-in-left`。但注意，动画效果要跟场景匹配。比如返回上一页，用从右往左的动画就违和；而新页面跳转，用淡入效果会更柔和。很多大厂的小程序，比如京东、美团，跳转动画都做了精细设计，用户感觉不到突兀。咱们开发者也得注意这点，别让用户觉得你是在生硬地换页面。

回到开头那句话：页面跳转是小程序开发的基础，但基础不代表简单。从`navigateTo`到`reLaunch`，从传参到动画，每个细节都可能影响用户体验。你写的每一行跳转代码，其实都在告诉用户：这条路怎么走，下一站是什么。所以别光顾着写功能，多想想用户在这个页面里想干什么，他下一步要去哪里。把这层想透了，页面跳转就不再是技术问题，而是产品体验的一部分。毕竟，用户打开小程序不是为了看代码，而是为了解决问题。跳转流畅了，问题解决得顺了，他们才会留下来。