小程序中几个路由函数（wx.switchTab、wx.reLaunch、wx.redirectTo、wx.navigateTo、wx.navigateBack）的用法

时间 2021-08-15

在微信公众平台的小程序开发文档里，目前微信提供的路由函数有5个，由于本人在编写代码的时候碰到了问题（花了近一个早上才找到了解决方案，所以想记录下就这个问题），顺便再重新上去查阅了下，记录下这个几个函数的用法。

①首先是wx.switchTab，用这个函数的前提是，你的app.json下要添加tabBar并且有list（里面的属性一般不能少于2个，但是也不能多于5个），也就是说你的小程序要有底部导航栏，刚刚已经说了如果你有导航栏的话，导航栏一般是2到5个。

用法也是比较简单，就是关闭其他所有非 tabBar 页面，跳转到 tabBar 页面。从wx.switchTab(Object object)中，可以看到可传入的参数类型是object类型，提供的参数有：

调用示例：

//app.json
{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/other/other",
        "text": "其他"
      }
    ]
  }
}


//然后在相应的js页面里
wx.switchTab({
  url: 'pages/index/index'
})

这样就可以跳转到别的导航栏里。

②接下来是wx.reLaunch，这个到目前为止，本人基本没怎么用到过，不过还是简单记录下：意思就是关闭所有页面，跳转到小程序内的某个页面。wx.reLaunch(Object object)，参数也是object类型，用法与wx.switchTab一样，这里就省略了。

调用示例：

//你想用在的.js里
wx.reLaunch({
  url: 'page页面的完整路径?id=1'
})
//需要跳转的应用内页面路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'

③第三个是wx.redirectTo，它跟接下来的第四个wx.navigateTo函数有很多相似的地方。wx.redirectTo(Object object)是用在关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面（这个算是它跟wx.switchTab最大的区别吧）。wx.redirectTo(Object object)，参数也是object类型，用法跟前两个一样，这里就省略了。

调用示例：

//你想用在的.js里
wx.redirectTo({
  url: 'page页面的完整路径?id=2'
})
//需要跳转的应用内页面路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'

④第四个是wx.navigateTo，前面说了它跟wx.redirectTo有很多相似的地方。wx.navigateTo(Object object)也是不能跳到 tabbar 页面，保留当前页面，跳转到应用内的某个页面。参数也是object类型，用法跟前面一样，这里不再说。

//你想用在的.js里
wx.navigateTo({
  url: 'page页面的完整路径?id=3'
})
//需要跳转的应用内页面路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'

注：这里顺便说一下wx.redirectTo和wx.navigateTo的区别，wx.navigateTo导航到另一个页面，会将当前的页面隐藏起来，使页面进入hide状态，并不会关闭可以通过返回按钮回到当前的页面；redirectTo()会使当前界面进入unload状态，即关闭该页面，将无法回到当前页面。

⑤最后一个是wx.navigateBack，这个想重点记录下。当有底部导航栏时，我们可以通过wx.switchTab跳转到相应的导航栏里。加入我把要跳转过去的底部导航栏去掉后，原本页面的数据要想传过去，如果用wx.redirectTo和wx.navigateTo，那么需要在url路径后附加上参数，有点不太方便。这时候如果用wx.navigateBack这个函数的话，可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。wx.navigateBack(Object object)的参数依然是object类型，但是跟前面的有区别：

调用示例：

let pages = getCurrentPages(); //获得当前js页面里的pages里的所有信息。
 
let prevPage = pages[ pages.length - 2 ];  
 
//prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面，以此类推。
 

 
//最后就是返回上一个页面。
 
wx.navigateBack({
 
    delta: 1  // 返回上一级页面
 
})