微信小程序（页面栈和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。

页面栈

页面栈（页面层级）：页面层级可能会有三层或者更多层，我们把这样的一个页面层级称为页面栈。

第一个元素为首页，最后一个元素为当前页面

分析

为了方便理解，我们这样描述页面栈：[ pageA, pageB, pageC ]，其中pageA在最底下，pageC在最顶部，也就是用户所看到的界面
结合上面案例，比如当前正在浏览我的页面，文件结构如下

则one为PageA在最底部，second为PageC在最顶部

页面栈最大层级限制

• 刚开始开发小程序时，限制页面栈的最大层级为5层，后来接收到很多反馈，于是放大了限制，将其扩充到10层。
• 所以目前在编写的时候，小程序宿主环境限制页面栈的最大层级为10层 ，也就是当页面栈到达10层之后就没有办法再推入新的页面了。

页面跳转-路由

接下来结合上边[ pageA, pageB, pageC ]页面栈描述以下几个和导航相关的API

1. wx.navigateTo为打开新页面，会增加页面栈大小，直到页面栈大小为10
2. wx.navigateBack为页面重定向，不会增加页面栈大小
3. wx.redirectTo为页面回退，会减少页面栈大小，直到页面栈大小为1
4. wx.switchTab为跳转tabBar页面专用API
5. wx.reLaunch为重新启动，关闭所有页面，可以打开任意页面

（1）wx.navigateTo

描述：

打开新页面，将原来的页面保留在页面栈中。在跳入到下一个页面的时候，目标页面同时进入页面栈中，在这种情况下点击手机的返回按钮才可以跳转到上一个页面。即保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回

wx.navigateTo —页面栈[pageA]变为[pageA,pageB]

页面栈[pageA,pageB]变为页面栈[pageA,pageB,pageC]


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

拓展：页面跳转-获取页面栈

<button bindtap="page_zhan">获取当前页面栈</button>

/**获取获取当前的页面栈 */
page_zhan(){
  console.log(getCurrentPages());
},

wx.navigateTo 验证页面栈同页叠加

接着上面验证，点击设置跳到设置页面，此时再在设置页面中添加跳页按钮，利用wx.navigateTo方法跳到设置页面

wx.navigateTo验证页面栈最大10层限制

一直跳页，当页面栈为10，即深度为10时达到最大限制。此时再点击按钮时无法跳页

（2）wx.navigateBack

描述：

关闭当前页面，返回上一页面或多级页面。
可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
案例：退出当前页面栈的最顶层页面

<button bindtap="back1">返回上一页</button>

  /**返回上一页 */
  back1(){
    wx.navigateBack({
      delta: 1,
    })
  },

拓展：结合页面栈返回到上一页或多级页面
wx.navigateBack可以结合delta参数实现多级退回（例如：结合页面栈返回pageA基层页面栈首页）

<button bindtap="backTo">跳转到基层页面我的</button>

/**返回页面栈基层页面 */
backTo(){
  const page = getCurrentPages(); /**获取当前页面栈 */
  wx.navigateBack({
    delta: page.length - 1
  })
},

这个 API 可以填写的参数只有 delta，表示要返回的页面数。
若 delta 的取值大于现有可返回页面数时，则返回到用户进入小程序的第一个页面。
当不填写 delta 的值时，就默认其为 1（注意，默认并非取 0），即返回上一页面。

（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，则会跳转失败。

路由+生命周期

页面路由触发方式及页面生命周期函数的对应关系

路由方式	触发时机	路由前页面生命周期	路由后页面生命周期
初始化	小程序打开的第一个页面		onLoad, onShow
打开新页面 调用	wx.navigateTo	onHide	onLoad, onShow
页面重定向 调用	wx.redirectTo	onUnload	onLoad, onShow
页面返回 调用	wx.navigateBack	onUnload	onShow
Tab	wx.switchTab	详见下节	详见下节
重启动	wx.reLaunch	onUnload	onLoad, onShow

Tab 切换对应的生命周期

案例：以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面

注意：tabBar页面初始化之后不会被销毁。

页面路由触发方式及页面生命周期函数的对应关系：

当前页面	路由后页面	触发的生命周期（按顺序）
A	A	无
A	B	A.onHide(), B.onLoad(), B.onShow()
A	B（再次打开）	A.onHide(), B.onShow()
C	A	C.onUnload(), A.onShow()
C	B	C.onUnload(), B.onLoad(), B.onShow()
D	B	D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()