微信小程序——转跳导航方式学习总结

最近在学习微信小程序的时候遇到了转跳导航的坑，在这里和大家分享总结下。

小程序页面的实例使用栈的数据结构存储，栈内元素最多5个，也就是说用户最多能点击5次返回，小程序也提供了查询当前页面信息栈的接口getCurrentPages()。可以通过调用该接口查看到当前小程序的页面信息，第一个为打开小程序的第一个页面，最后一个为当前页面，如果说页面数满了的话，在点击转跳页面就不会有任何反应。

小程序提供了三种页面转跳方法：wx.navigateTo、wx.redirectTo、和wx.switchTab。

1、wx.navigateTo

使用wx.navigateTo转跳页面时会保留当前页面，调用该方法的页面会被加入堆栈。这句话可能不好理解，其实就是相当于使用该方式转跳后，可以back或滑动屏幕回到之前的页面，之前的页面被保留下来了。

eg：

//方法1、可以在wxml中绑定点击事件，用js进行转跳
wx.navigateTo({
url: '../index/index?id=1'；
})

//方法2、可以在wxml中直接写
<navigator url="../index/index?id=1" class="navigator">

注:navigateTo里面还有一种方法是navigateBack，navigateBack可以返回上一个面。

//方法1
wx.navigateBack({
delta: 2
})

//方法2
<navigator open-type="navigateBack"  class="navigator`>

2、wx.redirectTo

使用wx.redirectTo 转跳页面时则不会保留当前页面，调用该方法的页面不会被加入堆栈。相当于使用该方式转跳后，使用back或滑动屏幕无法回到之前的页面，之前的页面被删除了 。

eg：

//方法1、可以在wxml中绑定点击事件，用js进行转跳
wx.redirectTo ({
url: '../index/index?id=1'；
})

//方法2、可以在wxml中直接写
<navigator url="../index/index?id=1" open-type="redirectTo " >

3、wx.switchTab

该方法与上面两种这不同，switch只能跳转到 tabBar 页，并关闭其他所有tabBar 面。

{
"tabBar": {
"list": [{
"pagePath": "index",
"text": "首页"
},{
"pagePath": "other",
"text": "其他"
}]
}
}
wx.switchTab({
url: '/index'
})