微信小程序精通到入门---07 tabBar和导航跳转

一、tabBar使用

tabBar就是微信小程序底部的tab框，每个框必须指定一个对应的页面，设置步骤如下。

步骤1、在images文件下创建一个nav目录，并且创建了6个图片（3个tab，每个tab的active和非acitve状态各一张）

步骤2、创建对应的页面，因为我们index页面已经创建好了，只要在创建2个对应的页面nav（用来后面导航演示用途），以及my页面。

步骤3、在app.json进行如下配置

  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/nav/home-off.png",
        "selectedIconPath": "images/nav/home-on.png"
      },
      {
        "pagePath": "pages/nav/nav",
        "text": "跳转演示",
        "iconPath": "images/nav/order-off.png",
        "selectedIconPath": "images/nav/order-on.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "个人中心",
        "iconPath": "images/nav/my-off.png",
        "selectedIconPath": "images/nav/my-on.png"
      }
    ]
  },

二、导航跳转

1、理论

//wx.navigateTo 用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo进行跳转， 以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用。

 

// wx.redirectTo 当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到微信所限制的 5 层页面栈。这时，我们应该考虑选择 wx.redirectTo。wx.redirectTo()用于关闭当前页面，跳转到应用内的某个页面。这样的跳转，可以避免跳转前页面占据运行内存，但返回时页面需要重新加载，增加了返回页面的显示时间。

// wx.reLaunch wx.reLaunch()与 wx.redirectTo()的用途基本相同， 只是 wx.reLaunch()先关闭了内存中所有保留的页面，再跳转到目标页面。

 

// wx.switchTab 对于跳转到 tab bar 的页面，最好选择 wx.switchTab()，它会先关闭所有非 tab bar 的页面。其次，也可以选择 wx.reLaunch()，它也能实现从非 tab bar 跳转到 tab bar，或在 tab bar 间跳转，效果等同 wx.switchTab()。使用其他跳转 API 来跳转到 tab bar，则会跳转失败。

 

// wx.navigateBack 用于关闭当前页面，并返回上一页面或多级页面。开发者可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。这个 API 需要填写的参数只有 delta，表示要返回的页面数。若 delta 的取值大于现有可返回页面数时，则返回到用户进入小程序的第一个页面。当不填写 delta 的值时，就默认其为 1（注意，默认并非取 0），即返回上一页面。

2、实际案例

在nav页面，在创建2个子页面nav_child1和nav_child2辅助演示用途。

nav.wxml

<view bindtap="navigateToTest">跳转到nav_child1</view>

<view bindtap="redirectToTest">重定向到nav_child1</view>

<view bindtap="switchTabTest">切换tab到index页面</view>

<!-- navigateBack -->
<view bindtap="redirectToTest2">重定向到nav_child2</view>

nav.js

navigateToTest(e) {
    // 跳转到页面，历史记录保留上次页面，可以返回
    wx.navigateTo({
      url: '/pages/nav/nav_child1/nav_child1',
      // url: '/pages/index/index',//不可跳转到tab页面
    })
   
  },

  redirectToTest(e) {
    // 重定向页面，类似window.open(),不会有返回，但是会有返回home按钮
    wx.redirectTo({
     url: '/pages/nav/nav_child1/nav_child1',
      // url: '/pages/index/index', //不可跳转到tab页面
    })
  },

  switchTabTest(e) {
    // 切换tab页面，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
    wx.switchTab({
      url: '/pages/index/index',  // 只可以跳转到tabBar页面
      // url: '/pages/index/index', 
    })
  },

  redirectToTest2(e) {
    // 重定向到child2，返回使用navigateBack无效， 即redirect不会记录历史记录
    wx.redirectTo({
      url: '/pages/nav/nav_child2/nav_child2',
     })
  },