小程序的三种跳转方式

小程序有多个页面，自然就避免不了页面间的跳转。

小程序的页面跳转还是很值得琢磨的。这个细节非常的重要！！！

为什么说这个跳转非常重要呢？

1、小程序的返回键。小程序不像手机APP，手机APP可以两次返回键才退出APP。小程序如果已经打开多个页面，返回键是返回上一个页面，如果是跳转的页面，也就是只有当前一个页面，只需要一个返回键就能退出。这有点坑，一不小心就退出了。还需要重新点进去，加载内容。

2、小程序的页面限制（只能打开5个页面）。上面说小程序的返回键不方便，那就都用新页面打开不就好了？！这里又要说：“NO”。小程序不像手机网站，浏览器打开手机网站，可以无限制打开网页。小程序一共只能同时打开5个页面。打开小程序，当前一个页面，再打开一个新页面，当前两个页面，如果在第二个页面上再跳转页面，当前还是两个页面。如果再新开页面，就是三个页面。这样，一共只能有5个。超过5个再点就不会有反应了。无论哪一种跳转方式都一样。

所以，是选择新页面打开，还是选择当前页面跳转。这个细节对用户体验非常重要。如果新打开页面，一共只能共存5个页面，如果选择当前页面跳转，按一下返回键就会退出小程序。一定要谨慎选择。

三种跳转方式的使用方法：

一、navigator组件跳转方式（可以新页面也可以当前页面跳转）。

相当于html里的a标签。是个标签。和a标签使用方式也是一样的。

链接文字

打开方式：

① navigator 新页面打开，对应wx.navigatorTo

② redirect 当前页面跳转，对应wx.redirectTo

③ switchTab 对应wx.switchTab

④ reLaunch 对应wx.reLaunch ，关闭所有页面，打开应用内某个页面

⑤ navigateBack 对应wx.navigateBack

二、wx.navigatorTo（api方式，新页面跳转）

使用方法：在前台绑定事件，在js响应事件里：

wx.navigateTo({

url: ‘test?id=1’ //test是新打开的页面，问号后面的id是传的参数，到test页面用options接收。

})

三、wx.redirectTo（API方式，当前页面跳转）

wx.redirectTo({

url: ‘test?id=1’ //test是要跳转的页面，问号后面的id是传的参数，到test页面用options接收。