课程大纲

  • (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 切换对应的生命周期
  • 页面路由触发方式及页面生命周期函数的对应关系
    在这里插入图片描述
    完毕,有问题留言小编…
Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐