小程序开发页面如何实现跳转？

1. 跳转介绍

小程序中，跳转是非常常见和重要的功能，而且一般都是通过点击按钮、图片等触发跳转。那么，在小程序中，如何实现跳转呢？

2. 页面跳转的代码实现

2.1 页面之间的跳转

小程序中跳转实际上是通过navigateTo、redirectTo、reLaunch、switchTab 四个 API 实现的。

navigateTo ：保留当前页面，跳转到应用内的某个页面，使用navigateBack返回到原页面。

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

redirectTo ：关闭当前页面，跳转到应用内的某个页面

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

reLaunch ：关闭所有页面，打开到应用内的某个页面

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

switchTab ：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

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

2.2 页面传值

除了单纯的跳转，我们还经常需要在跳转的时候带上参数，以便目标页面读取这些参数并做出相应的处理。那么，小程序中如何实现页面传值呢？

通过上一个页面的navigateTo、redirectTo、reLaunch、switchTab API 带上query参数即可。

// 页面 A 跳转到页面 B 并携带参数
wx.navigateTo({
  url: '/pages/index/index?name=test'
})

在页面 B 中可以通过getCurrentPages API 获取当前页面栈的信息，从而获取前一个页面所携带的参数。

let pages = getCurrentPages();
let prevPage = pages[pages.length - 2]; // 上一页
console.log(prevPage.options.name) // test

2.3 在JS文件中跳转页面

除了在小程序的 wxml 文件中通过按钮等元素触发页面跳转外，我们还可以在 js 文件中的逻辑代码中完成页面跳转。

首先需要引入小程序的路由 API，即 wx.navigateTo、wx.redirectTo 等，引入方式为：

const app = getApp();
Page({
  toIndex:function(){
    wx.navigateTo({
      url: '/pages/index/index',
    })
  },
})

3.总结

小程序中，页面之间的跳转是非常常见和重要的功能。而实现页面跳转的方法则是通过navigateTo、redirectTo、reLaunch、switchTab 四个 API，实现不同的跳转效果。同时也可以通过传值的方式，在页面之间传递数据。