微信小程序开发教程：轻松实现页面跳转

微信小程序开发跳转页面？听起来有点复杂，但其实没那么可怕！就像玩乐高一样，搭积木嘛，一步一步来就OK了。我近刚捣鼓完一个小程序，里面就涉及到不少页面跳转，现在就来分享一下我的经验，保证简单易懂，小白也能轻松上手！

咱得明确一点，小程序的页面跳转可不是随便乱跳的，它是有规则的。你可以想象成一个摞起来的盘子，每个页面就是一个盘子。你跳转到新页面，就相当于往上面加个盘子；返回上一页，就相当于把上面的盘子拿掉。这个“盘子堆”就叫做页面栈。

明白了这个道理，页面跳转就简单多了。微信小程序提供了好几种跳转方式，各有各的妙用，我一个个给你唠唠。

1. wx.navigateTo：优雅的跳转

这是我常用的跳转方式，就像你坐电梯上楼一样，稳稳当当的。用这个方法跳转，之前的页面还在页面栈里待着，你可以随时返回。举个栗子，你在浏览商品详情页，想看看其他商品，用wx.navigateTo跳转到商品列表页，看完之后点返回，又回到商品详情页了，丝毫不影响。代码嘛，简单到爆：

javascript

wx.navigateTo({

url: '/pages/newPage/newPage' // 跳转到newPage页面

记住，/pages/newPage/newPage 这个路径得在 app.json 里配置好哦，不然小程序会一脸懵逼，找不到路。

2. wx.redirectTo：说走就走的跳转

这个跳转方式就比较“干脆”，它跳转到新页面后，会直接把之前的页面从页面栈里清除掉。有点像你直接从一楼爬楼梯上到三楼，之前的楼层都“不存在”了。用这个方法跳转后，你再也回不到跳转前的页面了，所以要谨慎使用。比如说，用户登录成功后，就直接跳转到首页，就没必要保留登录页了，这时候用wx.redirectTo就挺合适。代码也简单：

javascript

wx.redirectTo({

url: '/pages/homePage/homePage' // 跳转到homePage页面

3. wx.switchTab：在标签页之间切换

如果你小程序底部有tab栏，比如首页、分类、购物车、我的，那么在这些tab页之间切换，就要用wx.switchTab了。它会直接切换到指定的tab页，之前的页面也会被清除。就像你在一栋楼里不同楼层之间切换，不会留下之前的轨迹。代码还是一样简单：

javascript

wx.switchTab({

url: '/pages/homePage/homePage' // 跳转到homePage页面，假设homePage是tab页

4. wx.reLaunch：重新启动

这个方法比较“霸道”，它会关闭页面，然后打开一个新的页面。就像你把盘子都扔了，重新开始摞盘子。通常在用户登录或授权后使用，可以彻底清除之前的页面状态。代码：

javascript

wx.reLaunch({

url: '/pages/homePage/homePage' // 跳转到homePage页面

5. wx.navigateBack：优雅的返回

前面说了那么多跳转，总得有个返回的方法吧？wx.navigateBack就是用来返回上一页的。就像你坐电梯下楼，一层一层地返回。这个方法非常简单，不需要参数：

javascript

wx.navigateBack({

delta: 1 // 返回上一页，可以设置delta值返回多级页面

delta参数可以指定返回几级页面，默认为1，返回上一页；如果设为2，则返回上两页，以此类推。

这几种跳转方式各有各的用处，选择哪种方式取决于你的具体需求。

为了更清晰地对比这些跳转方式，我特意做了个

跳转方式	描述	页面栈变化	适用场景
wx.navigateTo	保留当前页面，跳转到应用内的某个页面	页面入栈	普通页面跳转
wx.redirectTo	关闭当前页面，跳转到应用内的某个页面	当前页面出栈，新页面入栈	登录后跳转首页，完成某个操作后跳转其他页面
wx.switchTab	切换到 tabBar 页面	当前页面出栈，tab页面显示	在tabBar页面之间切换
wx.reLaunch	关闭页面，打开到应用内的某个页面	页面栈清空，新页面入栈	登录后跳转首页，重新启动应用
wx.navigateBack	返回上一页	页面出栈	返回上一页

怎么样？是不是很简单？ 其实小程序页面跳转并没有想象中那么复杂，掌握了这些方法，你就可以轻松玩转小程序的页面跳转啦！

我想问问大家，你们在开发小程序的过程中，有没有遇到过一些页面跳转的难题？或者有什么特别好用的技巧，欢迎分享出来，一起学习进步！