JS每日一题：小程序跳转页面有几种方式？ 有什么不同?

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点推送当天的参考答案

• 注 绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路

点击加入答题