微信小程序第三节 —— 页面跳转的那些事儿

微信小程序第一节 ——自定义顶部、底部导航栏以及获取胶囊体位置信息。
微信小程序第二节 —— 自定义组件。

• 作           者：是江迪呀
• ✒️本文关键词：微信小程序、页面跳转、移动端、前端
• ☀️每日   一言：有些事情不是对的才去坚持，而是坚持了它才是对的！

---

一、前言

书接上回 ，dai ga hou啊！我是 是江迪呀。在一个完整的微信小程序中，肯定不止一个页面，多个页面就一定会牵扯到页面的跳转。那么就让我们一起来了解下，微信小程序的页面跳转！

二、页面跳转的方式

2.1 navigateTo（常用）

（1）特点

• 保留当前页面，将上一个页面压入到栈中。
• 不能跳转tabBar页面。
• 可以传递参数。
• navigateTo的最大跳转深度为10层，即最多返回到前面的10个页面。（栈中算上当前页面最多存储10个页面的url，如果超出就会报栈溢出）

（2）使用

// 在当前页面中调用 navigateTo 方法跳转到目标页面
wx.navigateTo({
  url: '/pages/detail/detail',
  success: function(res) {
    // 跳转成功
    console.log('navigateTo success:', res);
  },
  fail: function(res) {
    // 跳转失败
    console.log('navigateTo fail:', res);
  }
})

（3）传参

• 通过在路径后面添加参数的方式传递参数，可以在目标页面中通过options属性来获取参数。多个参数使用&来拼接。

wx.navigateTo({
  url: '/pages/detail/detail?id=123&name=apple'
})

目标页面取参：

Page({
  onLoad: function(options) {
    // 获取跳转参数
    console.log('id:', options.id);
    console.log('name:', options.name);
  }
})

• 通过options属性传递参数。在跳转的页面中，可以使用options属性来获取参数。通过在当前页面中定义一个options对象，将需要传递的参数作为该对象的属性值传递给目标页面。

在当前页面中调用navigateTo方法：

wx.navigateTo({
  url: '/pages/detail/detail'
})

在当前页面中定义一个options对象：

var options = {
  id: 123,
  name: 'apple'
}

在目标页面中通过options属性获取参数：

Page({
  onLoad: function(options) {
    // 获取跳转参数
    console.log('id:', options.id);
    console.log('name:', options.name);
  }
})

• 使用全局参数进行传递。此种方法适用范围最广。

在当前页面中将参数保存到全局数据中：

getApp().globalData.id = 123;
getApp().globalData.name = 'apple';

wx.navigateTo({
  url: '/pages/detail/detail',
});

在目标页面中获取全局数据中的参数：

Page({
  onLoad: function() {
    console.log('id:', getApp().globalData.id);
    console.log('name:', getApp().globalData.name);
  }
})

（4）使用场景

wx.navigateTo的使用场景最广泛，基本上一级、二级页面之间的跳转都用它。它适合使用在打开新的页面，支持返回操作的场景中，比如详情页、结果页的跳转。

2.2 redirectTo

（1）特点

• 关闭当前页面跳转新页面。
• 不保留上个页面的信息。
• 不能跳转到tabBar页面。
• 可以传递参数

（2）使用

将url写上要跳转的地址即可：

wx.redirectTo({
  url: '/pages/detail/detail'
});

（3）传参

• 通过在url上拼接参数。

wx.redirectTo({
  url: '/pages/detail/detail?id=123&name=apple'
});

接收参数：

Page({
  onLoad: function(options) {
    console.log('id:', options.id);
    console.log('name:', options.name);
  }
})

• 使用全局参数进行传递。同wx.navigateTo传参方式。

（4）使用场景

使用redirectTo方法可以快速地关闭当前页面并跳转到目标页面，适用于一些不需要返回到当前页面的场景。

2.3 switchTab

（1）特点

• 可以实现tabBar页面的跳转。
• 不可以在页面之间传递参数数据。

（2）使用

wx.switchTab用于tabBar页面的跳转。一般是将底部导航栏的路径放到一个数组中，点击不同的菜单跳转不同的页面。

  data: {
    tabList:[
      {
        "pagePath":"/pages/index/index",
        "text":"首页",
      },
      {
        "pagePath":"/pages/index2/index3",
        "text":"页面2",
      },
      {
        "pagePath":"/pages/index3/index3",
        "text":"页面3",
      }
    ]
  },

wx.switchTab({
  url: '/pages/index/index2'
})

（3）传参

wx.switchTab本身不支持页面之前的传参，但是如果想要传递参数的话，就可以使用全局变量来实现数据的传递。

• 使用全局参数进行传递。同wx.navigateTo传参方式。

（4）使用场景

switchTab方法就是单独为跳转tabBar页面量身定制的，让用户快速地跳转到应用的底部选项卡页面，方便用户访问应用的主页等核心页面，展示核心功能。

2.4 reLaunch

（1）特点

• 关闭所有页面，打开新页面。
• 清楚之前页面的所有数据和状态。
• 可以传递参数。

（2）使用

wx.reLaunch({
  url: '/pages/login/login'
})

（3）传参

• 通过在url上拼接参数。

wx.reLaunch({
  url: '/pages/detail/detail?id=123&name=apple'
})

接收参数：

Page({
  onLoad: function(options) {
    console.log('id:', options.id);
    console.log('name:', options.name);
  }
})

• 使用全局参数进行传递。同wx.navigateTo传参方式。

（4）使用场景

通过wx.reLaunch()方法实现路由跳转，可以关闭所有页面，打开新的页面，可以实现从当前页面切换到一个完全不同的页面。主要用于小程序的重新启动或者跳转到登录页面、等场景。比如，当用户需要重新开始某个操作流程时，可以使用reLaunch方法。例如，在一个表单提交完成后，用户需要重新填写另一个表单，可以使用reLaunch方法清除之前表单的数据和状态。

2.5 navigateBack

（1）特点

• 可以返回到小程序的任何一个页面，包括tabBar页面。
• 返回后，当前页面不会被销毁，而是隐藏在后台栈中。
• navigateBack的最大跳转深度为10层，即最多返回到前面的10个页面。
• 常和navigateTo配合使用。
• navigateBack可以返回到小程序的上一级页面或多级页面，但不能跨越非同一级的页面。（就是说从navigateBack只能返回存在栈中的页面。比如：A页面跳转到B页面再从B页面跳转到C页面，再从C页面跳转到D页面，此时页面栈中的情况是：[A,B,C,D]，你可以从D页面直接返回返回到A页面或者是按照跳转的顺序依次返回，但是绝不能返回E页面，因为E页面不存在栈中！）

（2）使用

wx.navigateBack({
  delta: 1,
  success: function(res) {
    // success
  },
  fail: function() {
    // fail
  },
  complete: function() {
    // complete
  }
})

其中，delta表示返回的页面数（你想返回几级页面delta就写几，但是页面栈中有几个页面要做到心中有数，不然就会出现IndexOutOfBoundsException异常），success、fail和complete是回调函数，分别在成功、失败和完成时执行。

（3）传参

• 使用eventChannel.emit方法向上级页面传递参数：

wx.navigateBack({
  delta: 1,
  success: function(res) {
    // success
    res.eventChannel.emit('dataFromOpenedPage', { data: 'apple' });
  }
})

接收参数：

Page({
  onLoad: function() {
    var eventChannel = this.getOpenerEventChannel()
    eventChannel.on('dataFromOpenedPage', function(data) {
      console.log(data)
    })
  }
})

• 使用全局参数进行传递。同wx.navigateTo传参方式

（4）使用场景

wx.navigateBack常与’wx.navigateTo’连用用于返回上级或者多级页面。