微信小程序（页面栈和API跳转）_微信小程序 关闭指定页面栈

课程大纲

• （1）数据操作限制补充
• （2）页面栈
• （3）API页面跳转—router路由API
  wx.navigateTo
  wx.navigateBack
  wx.redirectTo
  wx.switchTab
  wx.reLaunch

数据操作限制

• 针对上节所讲的程序注册器与页面注册器，简单做下补充，即页面数据data的操作限制
  （1）直接修改Page实例的this.data而不调用this.setData是无法改变页面的状态的，还会造成数据不一致。
  （2）由于setData是需要两个线程的一些通信消耗，为了提高性能，每次设置的数据不应超过1024KB；
  （3）不要把data中任意一项的value设为undefined，否则可能会引起一些不可预料的bug。

页面栈

• 一个小程序拥有多个页面，且部分页面可能是互相嵌套的
  

页面代码案例

• “myself我的”页面代码案例
  
  

页面栈

• 页面层级可能会有三层或者更多层，我们把这样的一个页面层级称为页面栈。
  
• 第一个元素为首页，最后一个元素为当前页面
  

页面栈

• 分析：
• 为了方便理解，我们这样描述页面栈：[ pageA, pageB, pageC ]，其中pageA在最底下，pageC在最顶部，也就是用户所看到的界面
• 结合上面案例，比如当前正在浏览公司地址页面local，文件结构如下
  
• 则myself为PageA在最底部，local为PageC在最顶部，即当前浏览页
• 页面栈最大层级限制
• 注意：
• 刚开始开发小程序时，限制页面栈的最大层级为5层，后来接收到很多反馈，于是放大了限制，将其扩充到10层。
• 所以目前在编写的时候，小程序宿主环境限制页面栈的最大层级为10层 ，也就是当页面栈到达10层之后就没有办法再推入新的页面了。

页面跳转-路由

• 接下来结合上边[ pageA, pageB, pageC ]页面栈描述以下几个和导航相关的API
• （1）wx.navigateTo
  增加页面栈层级，左上角返回按钮减少页面栈层级，最大层级限制10层
• （2）wx.navigateBack
• 返回上一页或多页，参数delta返回层级数量，默认为1，上限为最底层
• （3）wx.redirectTo
• 关闭当前页面，本质为页面重定向，页面栈大小不变
• （4）wx.switchTab
• 导航页切换
• （5）wx.reLaunch
• 关闭所有页面，关闭页面栈所有页面，打开目标页面

页面跳转-路由

• （1）wx.navigateTo
• 描述：打开新页面，将原来的页面保留在页面栈中。在跳入到下一个页面的时候，目标页面同时进入页面栈中，在这种情况下点击手机的返回按钮才可以跳转到上一个页面。即保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回;
• 案例：wx.navigateTo({ url: ‘pageD’ }) 可以往当前页面栈多推入一个 pageD，此时页面栈变成 [
  pageA, pageB, pageC, pageD ]
• （1）wx.navigateTo —页面栈[pageA]变为[pageA,pageB]
  
• （1）页面栈[pageA,pageB]变为页面栈[pageA,pageB,pageC]

• （1）wx.navigateTo
  
• 假如使用wx.navigateTo从四级页面跳转到二级页面，此时会在页面栈顶添加一个与二级页面初始状态一样的界面，但两个页面状态是独立的。

页面跳转-获取页面栈

• 拓展：获取获取当前的页面栈
  语法：getCurrentPages()
  作用：可通过 getCurrentPages() 获取当前的页面栈

页面跳转-路由

• （1）wx.navigateTo 验证页面栈同页叠加
  接下来验证下上述导图
  
• 接着上面验证，点击公司地址跳到公司地址页面，此时再在公司地址页面中添加跳页按钮，利用wx.navigateTo方法跳到公司信息页面
  
• （1）wx.navigateTo验证页面栈状态独立
  跟验证页面栈同页叠加步骤类似，在公司信息页面添加操作按钮
  
• 跟验证页面栈同页叠加步骤类似，在公司信息页面添加操作按钮
  页面栈为4层pageD时，在公司信息页面点击隐藏，隐藏红色区域。之后点击返回按钮，再次返回到pageB，会发现该页面栈红色区域为显示状态。
  
• （1）wx.navigateTo验证页面栈最大10层限制
  一直跳页，当页面栈为10，即深度为10时达到最大限制。此时再点击按钮时无法跳页
  
• （2）wx.navigateBack
• 描述：关闭当前页面，返回上一页面或多级页面。
  可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
• 案例：退出当前页面栈的最顶层页面，即退出当前页面pageD，此时页面栈变成 [ pageA, pageB, pageC ]
  在local.js中设置按钮，点击返回上一页，即返回aboutOur“关于我们”页面
  
• （2）页面栈[pageA,pageB,pageC]变为[pageA,pageB]
  

页面跳转-获取页面栈

• 拓展：案例：获取获取当前的页面栈
  例如在local.js中获取当前页面栈
  

页面跳转-获取页面栈

• 拓展：结合页面栈返回到上一页或多级页面
  wx.navigateBack可以结合delta参数实现多级退回
  ①退回到上一页
  
  ②退回到上两页
  
  上图这个 API 可以填写的参数只有 delta，表示要返回的页面数。
  若 delta 的取值大于现有可返回页面数时，则返回到用户进入小程序的第一个页面。
  当不填写 delta 的值时，就默认其为 1（注意，默认并非取 0），即返回上一页面。

• 拓展：③结合页面栈返回pageA基层页面栈首页
  

• 假如当前页面为五级页面，使用wx.navigateBack：
  ①当delta为1，关闭五级页面，当前页面为四级页面，页面栈大小减1；
  ②当delta为2，关闭依次五级页面和四级页面，当前页面为三级页面，页面栈大小减2；
  以此类推，直到栈底为止，也就是首页。

页面跳转-路由

• （2）wx.navigateBack
  wx.navigateBack可以传参决定返回几层。
  
• （3）wx.redirectTo
• 描述：关闭当前页面，跳转到应用内的某个页面。页面重定向，将页面重新定向到一个目标页面，并不能返回到上一个页面。
• 案例：wx.redirectTo({ url: ‘pageE’ }) 是替换当前页变成pageE，此时页面栈变成 [ pageA,
  pageB, pageE ]，当页面栈到达10层没法再新增的时候，往往就是使用redirectTo这个API进行页面跳转
  下图：假如使用wx.redirectTo从四级页面重定向到二级页面，此时会将关闭四级页面，并使用二级页面替换四级页面，但两个页面状态是独立的。此时的页面栈大小不变
  注意：wx.redirectTo和wx.navigateTo的区别。
  
• 当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到微信所限制的10层页面栈。这时应该考虑选择 wx.redirectTo。
• wx.redirectTo()用于关闭当前页面，跳转到应用内的某个页面。
• 优缺点：这样的跳转可以避免跳转前页面占据运行内存，但返回时页面需要重新加载，增加了返回页面的显示时间。
• 验证方法与验证wx.navigateTo跳页API类似
• （4）wx.switchTab
• 描述：Tab切换，跳转的页面必须是app.json 中 tabBar 配置的页面。跳转到tabBar页面同时关闭其他非tabBar页面
• 注意：wx.navigateTo和wx.redirectTo只能打开非tabBar页面，switchTab只能跳转到带有tab的页面，不能跳转到不带tab的页面
• 小程序提供了原生的Tabbar支持，我们可以在app.json声明tabBar字段来定义Tabbar页
• （5）wx. reLaunch
• 描述：关闭所有页面，打开到应用内的某个页面。即重新启动， 可以打开任意页面。
• wx.reLaunch()与 wx.redirectTo()的用途基本相同， 只是 wx.reLaunch()先关闭了内存中所有保留的页面，再跳转到目标页面（此时页面栈变为[pageA]仅仅1层）。
• 案例：wx. reLaunch({ url: ‘pageH’ }) 重启小程序，此时会关闭页面栈所有页面，打开pageH页面。
• （6） 跳转tabBar页面
• 对于跳转到 tab bar 的页面，最好选择wx.switchTab()，它会先关闭所有非 tab bar 的页面。
• 其次，也可以选择 wx.reLaunch()，它也能实现从非 tab bar 跳转到 tab bar，或在 tab bar
  间跳转，效果等同 wx.switchTab()。使用其他跳转 API 来跳转到 tab bar，则会跳转失败。
• 小结：
  wx.navigateTo为打开新页面，会增加页面栈大小，直到页面栈大小为10
  wx.redirectTo为页面重定向，不会增加页面栈大小
  wx.navigateBack为页面回退，会减少页面栈大小，直到页面栈大小为1
  wx.switchTab为跳转tabBar页面专用API
  wx. reLaunch为重新启动，关闭所有页面，可以打开任意页面

路由+生命周期

• 页面路由触发方式及页面生命周期函数的对应关系
  
• Tab 切换对应的生命周期
  案例：以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面
  注意下图：tabBar页面初始化之后不会被销毁。
  
• Tab 切换对应的生命周期
• 页面路由触发方式及页面生命周期函数的对应关系
  
  完毕，有问题留言小编…