小程序跳转页面有几种方式？ 有什么不同?

小程序跳转页面有几种方式？

在小程序中每个页面可以看成是一个pageModel，pageModel全部以栈的形式进行管理(最多五层)

在说跳转方式之前我们先来温习一下栈和堆的区别

管理方式不同

栈是系统编译器启动管理，不需要程序员手动管理
堆的释放由程序员手动管理，不及时回收容易产生内存泄露

分配方式不同

栈有两种分配方式：静态分配和动态分配
静态分配是系统编译器完成的，比如局部变量的分配
动态分配是由alloc函数进行分配的，但是栈的动态分配和堆的动态分配是不同的，它的动态分配也由系统编译器进行释放，不需要程序员手动管理
堆是动态分配和回收内存的，没有静态分配的堆

分配大小不同

栈是向低地址扩展的数据结构，是一块连续的内存区域
堆是向高地址扩展的数据结构，是不连续的内存区域

进入正题

小程序的路由跳转分为两种，组件跳转以及api跳转

api形式分为

navigateTo 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面
redirectTo 关闭当前页面，跳转到应用内的某个页面
switchTab 跳转到tabBar页面,同时关闭其他非tabBar页面
navigateBack 返回上一页面
reLanch 关闭所有页面，打开到应用内的某个页面
前面有提到栈，那么这些导航方式跟栈有什么关系呢,看下面

初始化 新页面入栈
navigateTo 新页面入栈
redirectTo 当前页面出栈，新页面入栈
navigateBack 页面不断出栈，直到目标返回页，新页面入栈
switchTab 页面全部出栈，只留下新的 Tab 页面
reLanch 页面全部出栈，只留下新的页面
通过组件形式进行跳转

// navigator 组件默认的 open-type 为 navigate

跳转到新页面

// 如需要其它形式进行跳转，可以更改open-type 属性以上api值

切换 Tab

getCurrentPages
getCurrentPages() 函数用于获取当前页面栈的实例(属性及方法)，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面

// Page A 跳转至Page B
wx.navigateTo({ url: '/pages/B/B' })

// Page B
const pages = getCurrentPages()
const perPage = pages[pages.length - 2] // 上一个页面
perPage.setData({
title: 'JS每日一题'
})
总结
小程序页面由栈形式管理，最多为5层，在合理的场景使用合理的方式进行跳转

本作品采用《CC 协议》，转载必须注明作者和本文链接