微信小程序中的TabBar页面与非Tab页面的切换规则

在 微信小程序中的TabBar 中介绍了如何在小程序中使用 TabBar 组件，了解了如何在 TabBar 的页面之间进行切换。 那如何在与非 TabBar 中的页面进行切换呢？

案例说明

本文的案例是基于 微信小程序中的TabBar 来添加的，如果还没完成基本的 Tabbar 的建立，请先完成。 然后在案例中新增一个名为 start 的页面，增加之后的 app.json 为（片段）:

"pages": [
  "pages/start/start",
  "pages/classify/index",
  "pages/index/index",
  "pages/cart/index",
  "pages/user/index",
  "pages/logs/logs"
],

并在 start.wxml 中放置一个按钮， start.xwml 如下:

<button bindtap="goHome">Go Home</button>

然后在 start.js 中添加空的方法 goHome

goHome: function() {
  console.log('go home')
},

可以看到，默认小程序开始运行将首先显示 start 页面。

从非 Tabbar 页面跳转到 TabBar 页面

不能使用 redirectTo 和 navigateTo 方法从非 TabBar 页面转到 TabBar 页面中，比如，在 goHome 方法中加入：

goHome: function() {
  console.log('go home')
  wx.redirectTo({
    url: '/pages/index/index'
  })
},

只有使用 switchTab 才可以从一个非 Tabbar 页面转到 TabBar 页面中, 如下:

goHome: function() {
  console.log('go home')
  wx.switchTab({
    url: '/pages/index/index'
  })
},

同时观察页面的生命周期方法，会发现跳转到 index 页面以后， start 页面会被销毁掉（onUnload 方法会被调用）

从 Tabbar 页面跳转到非 TabBar 页面

从 Tabbar 页面跳转到非 TabBar 页面可以使用 redirectTo 或是 navigateTo 方法

1. redirectTo

在案例中，我们从 index 跳转到 start 页面， 使用 redirectTo 方法跳转后，index 页面会被销毁（onUnload方法会被执行）。

但在 start 页面的左上角会出现一个代表 Home 的图形按钮，安该按钮后，会直接退回到 index 界面（start 页面将被销毁）。

2. navigateTo

在案例中，我们从 index 跳转到 start 页面， 使用 redirectTo 方法跳转后， index 页面只是隐藏而不会被销毁。

start 页面的左上角会出现回退的图形按钮，按下该按钮后，回到 index 界面 （index 不会重建，只是调用 onShow 方法， 但 start 页面将被销毁）