共计 1328 个字符，预计需要花费 4 分钟才能阅读完成。
20190228
小程序跳转页面有几种方式？有什么不同?
在小程序中每个页面可以看成是一个 pageModel，pageModel 全部以栈的形式进行管理 (最多五层)
在说跳转方式之前我们先来温习一下栈和堆的区别
管理方式不同
栈是系统编译器启动管理，不需要程序员手动管理
堆的释放由程序员手动管理，不及时回收容易产生内存泄露
分配方式不同
栈有两种分配方式：静态分配和动态分配
静态分配是系统编译器完成的，比如局部变量的分配
动态分配是由 alloc 函数进行分配的，但是栈的动态分配和堆的动态分配是不同的，它的动态分配也由系统编译器进行释放，不需要程序员手动管理
堆是动态分配和回收内存的，没有静态分配的堆
分配大小不同
栈是向低地址扩展的数据结构，是一块连续的内存区域
堆是向高地址扩展的数据结构，是不连续的内存区域
进入正题
小程序的路由跳转分为两种，组件跳转以及 api 跳转
api 形式分为
navigateTo 保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回到原页面
redirectTo 关闭当前页面，跳转到应用内的某个页面
switchTab 跳转到 tabBar 页面, 同时关闭其他非 tabBar 页面
navigateBack 返回上一页面
reLanch 关闭所有页面，打开到应用内的某个页面
前面有提到栈，那么这些导航方式跟栈有什么关系呢, 看下面
初始化 新页面入栈
navigateTo 新页面入栈
redirectTo 当前页面出栈，新页面入栈
navigateBack 页面不断出栈，直到目标返回页，新页面入栈
switchTab 页面全部出栈，只留下新的 Tab 页面
reLanch 页面全部出栈，只留下新的页面
通过组件形式进行跳转
// navigator 组件默认的 open-type 为 navigate
<navigator url=”/page/navigate/navigate?title=navigate”> 跳转到新页面 </navigator>
// 如需要其它形式进行跳转，可以更改 open-type 属性以上 api 值
<navigator url=”/page/navigate/navigate?title=navigate” open-type=”switchTab”> 切换 Tab</navigator>
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 层，在合理的场景使用合理的方式进行跳转
关于 JS 每日一题
JS 每日一题可以看成是一个语音答题社区 每天利用碎片时间采用 60 秒内的语音形式来完成当天的考题 群主在次日 0 点推送当天的参考答案
注 绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路
点击加入答题
