写在前面
onLoad钩子是页面级别生命周期,在页面第一次加载时触发,即在页面初始化时执行,仅执行一次。那么,为什么在微信开发者工具中,从通过navigator跳转的页面返回原页面后,再通过navigator跳转会再次执行onLoad钩子呢?
写这篇文章的初衷是使用微信开发者工具的底部导航栏(Tab Bar)和navigator标签跳转时,不理解为什么onLoad钩子函数在Tab Bar间切换时不会二次触发,在navigator跳转时会多次反复触发(每次通过navigator跳转后的页面都会触发onLoad钩子)。不理解onLoad仅执行一次的含义。
资料查阅
当我们进入一个小程序时(index.wxml),路由栈内会存储index页面,在通过首页内的navigator标签跳转后,跳转的目标页面会按顺序被添加到路由栈中。每次打开一个新页面,该页面就被推入栈顶,而返回上一页或关闭当前页面时,该页面就从栈顶弹出。
一. 页面级别生命周期
在微信小程序中,每个页面都有自己的生命周期函数,用于在不同的阶段执行相应的操作。以下是微信小程序页面级别的生命周期函数:
-
onLoad: 页面加载时触发,可以在此函数中进行一些初始化操作和数据获取。
-
onShow: 页面显示时触发,每次页面可见时都会执行,可以在此函数中更新页面数据。
-
onReady: 页面初次渲染完成时触发,表示页面已经准备就绪,可以在此函数中进行页面布局初始化、动态节点查询等操作。
-
onHide: 页面隐藏时触发,当跳转到其他页面或按下 Home 键时会执行。
-
onUnload: 页面卸载时触发,当页面被销毁前会执行,可以在此函数中进行清理操作和资源释放。
-
onPullDownRefresh: 用户下拉刷新时触发,可以在此函数中处理下拉刷新事件,并执行相应的数据请求和更新。
-
onReachBottom: 页面上拉触底时触发,可以在此函数中处理上拉加载更多事件,并执行相应的数据加载和更新。
-
onShareAppMessage: 用户点击分享按钮时触发,可以在此函数中自定义转发内容和路径等相关配置。
-
onPageScroll: 页面滚动时触发,可以在此函数中监听页面滚动事件,并作出相应的处理。
这些生命周期函数可以根据需要在页面的 JavaScript 文件中编写对应的处理代码。通过合理运用这些函数,可以在不同的阶段实现页面的初始化、数据加载、更新显示、事件处理等操作,提升用户体验和交互效果。
二. 在微信小程序中,哪些情况下在进入页面时不触发onLoad钩子
在微信小程序中,一般情况下,在进入页面时都会触发 onLoad 钩子函数。但也有一些特殊情况下,可能不会触发 onLoad 钩子函数,包括以下几种情况:
-
页面缓存:如果当前页面已经被添加到页面缓存中,并且再次打开该页面时,并不会触发
onLoad钩子函数。因为此时微信小程序会直接从缓存中获取页面数据,保持之前的状态。 -
Tab 页切换:如果你的小程序中使用了底部导航栏(Tab Bar),当用户从一个 Tab 切换到另一个 Tab 时,新展示的页面不会触发
onLoad钩子函数。因为这是从缓存中读取的已存在的页面数据。 -
页面返回:当用户从当前页面返回到上一个页面时,并不会重新触发
onLoad钩子函数。只有初次进入页面才会触发。
需要注意的是,尽管 onLoad 钩子函数在以上情况下不会被触发,但 onShow 钩子函数仍然会在页面展示时被触发,因此可以通过 onShow 钩子函数来处理这些情况下的初始化操作和数据更新。
三. 什么是路由栈:
路由栈是指在应用程序中跟踪页面导航历史的一种数据结构。它类似于一个堆栈,用于存储用户通过导航操作打开或关闭的页面。
当用户进入应用程序的不同页面时,这些页面会按顺序被添加到路由栈中。每次打开一个新页面,该页面就被推入栈顶,而返回上一页或关闭当前页面时,该页面就从栈顶弹出。
通过维护路由栈,应用程序可以记录用户导航的历史轨迹,并提供相应的导航功能。例如,用户可以使用返回按钮回退到先前访问过的页面,或者通过特定的导航操作跳转到其他页面。
路由栈的实现通常与导航框架或库相关。例如,在微信小程序中,可以使用小程序框架提供的导航 API 来管理路由栈,如保留当前页面、跳转到新页面、返回上一页等操作。
总结来说,路由栈是一种用于追踪页面导航历史的数据结构,允许用户在应用程序中自由地切换和浏览不同的页面。