微信小程序（页面栈和API跳转）

Love The Way You Lie 2023-06-17 12:55 22阅读 0赞

【本节大纲】

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。

# 页面栈 #

页面栈（页面层级）：页面层级可能会有三层或者更多层，我们把这样的一个**页面层级称为页面栈**。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]  
第一个元素为首页，最后一个元素为当前页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]

#### 分析 ####

为了方便理解，我们这样描述页面栈：\[ pageA, pageB, pageC \]，其中pageA在最底下，pageC在最顶部，也就是用户所看到的界面  
结合上面案例，比如当前正在浏览我的页面，文件结构如下  
![在这里插入图片描述][20191129094051340.png]  
则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\]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]  
页面栈\[pageA,pageB\]变为页面栈\[pageA,pageB,pageC\]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 4]  
假如使用wx.navigateTo从四级页面跳转到二级页面，此时会在页面栈顶添加一个与二级页面初始状态一样的界面，但**两个页面状态是独立的**。

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

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 5]  
接着上面验证，点击设置跳到设置页面，此时再在设置页面中添加跳页按钮，利用wx.navigateTo方法跳到设置页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 6]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 7]

> 一直跳页，当页面栈为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），即返回上一页面。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 8]

### （3）wx.redirectTo ###

**描述**：关闭当前页面，跳转到应用内的某个页面。页面重定向，将页面重新定向到一个目标页面，并不能返回到上一个页面。  
**案例**：wx.redirectTo(\{ url: ‘pageE’ \}) 是替换当前页变成pageE，此时页面栈变成 \[ pageA, pageB, pageE \]，当页面栈到达10层没法再新增的时候，往往就是使用redirectTo这个API进行页面跳转  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 9]

> 假如使用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，则会跳转失败。

# 路由+生命周期 #

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

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

### Tab 切换对应的生命周期 ###

案例：以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 10]

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191129093846515.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191129093903278.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20191129094051340.png]: https://img-blog.csdnimg.cn/20191129094051340.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191129095112873.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191129095444781.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191129095506196.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191129100718987.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191129103448381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191129103630306.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191129104348301.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191129104437668.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191129105133219.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70