小程序页面栈

主要问题

  • 1、多次 navigateTo 之后,页面无法继续跳转报错
// 错误提示 errMsg: “navigateTo:fail webview count limit exceed”
  • 跳转失败原因

      - 1.wx.navigateTo 只能跳转到非tabBar页面,tabBar导航栏页面只能用 wx.switchTab 方法跳转;
      - 2.wx.navigateTo 跳转的页面栈太多了,超过**十层**页面栈就会导致跳转失败。
      - 3.wx.navigateTo 跳转的页面路径没有在pages.json内配置
    
  • 解决办法:

      - 1.尽量使用 wx.redirectTo 替换 wx.navigateTo;因为 wx.redirectTo 会关闭当前页面,跳转到应用内的某个页面。
      - 2.充分理解页面栈的概念,进行入栈、出栈操作
    

页面栈概念

  • 什么是页面栈?

  • 首先先来了解一下微信小程序的运行环境:什么是页面栈?

  • 小程序的运行环境分成渲染层和逻辑层,其中 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。

  • 小程序的渲染层和逻辑层分别由2个线程管理:渲染层的界面使用了WebView 进行渲染;逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面,所以渲染层存在多个WebView线程,这两个线程的通信会经由微信客户端做中转,逻辑层发送网络请求也经由Native转发

  • 一个页面使用一个 WebView 线程进行渲染。如果打开10个页面,则会开启 10 个 WebView 线程,此时内存中的十个webView线程我们称之为页面栈。当然小程序也会对这块内存做限制,目前页面栈的限制是不能超过十条。在小程序中页面的路由是小程序框架本身控制的我们不要去手动管理, 小程序框架通过一个页面栈的设计来管理所有的界面,当发生路由跳转时,页面栈就会做出相应的变化,在小程序页面中通过 getCurrentPages() 就可以获取到当前的页面栈。

  • 当发生路由切换的时候,页面栈的表现如下:

  • 对应路由跳转API小程序初始化 ==> 新页面入入栈

  • 打开新页面 ==> 新页面入入栈

  • 页面重定向 ==> 当前页面出栈,新页面入栈

  • 页面返回 ==> 页面不断出栈,直到目标页

  • Tab 切换 ==> 页面全部出栈,只留下新的 Tab 页面

  • 重加载 ==> 页面全部出栈,只留下新的页面

  • wx.navigateBack ==> 当前页面出栈,返回的页面入栈

总结

wx.navigateTo 不断入栈的过程

wx.navigateBack 实际为出栈过程,会清空过程中所有的页面栈,只保留当前页和之前的页面栈

ch11
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。