📚 课程目录第3章小程序生命周期与页面栈面试题

生命周期与页面栈

  📌 章节导入：生命周期的正确理解不仅是基础题，更是排查“页面跳转后数据不刷新”、“分享回调不执行”、“弹窗层级混乱”等线上问题的核心钥匙。面试官常通过“错误触发条件 + 场景复现”来考察你对小程序底层页面栈模型的掌握深度。

⚠️ 避坑总提醒：面试中切忌只背生命周期顺序。一定要结合 wx.navigateTo、wx.redirectTo、wx.switchTab、wx.navigateBack 四种跳转方式对应的栈变化来回答，这才是区分高级工程师的关键。

📝 面试问答卡片 1 · 生命周期完整触发顺序

  🎯 面试问题：请详细描述一个小程序页面从打开到关闭的完整生命周期触发顺序，包括 app 生命周期。

🧠 面试官考察点：1. 是否清楚 App/Page 生命周期分界；2. 是否理解冷启动、前台切后台的差异化触发；3. 是否知道 onLoad 只触发一次的特性。

  📌 回答框架：先区分 App 级（onLaunch → onShow → onHide）→ 再细化 Page 级（ onLoad → onShow → onReady → onHide → onUnload ）→ 最后强调场景：切后台触发 onHide/onShow，切前台只触发 onShow。

💡 简短示例回答：冷启动时 App 先 onLaunch → onShow，然后当前页面 onLoad → onShow → onReady。Home 键切后台 App 触发 onHide，页面触发 onHide；切回前台仅 App onShow 和页面 onShow。关闭页面触发 onUnload，最后一个页面退出时 App 不触发 onUnload。

🤔 可能追问：
① onReady 和 onShow 哪个在前？如果页面 setData 放在哪里最合适？
② 小程序从前台切到后台，再切回来，App onShow 会触发但 onLoad 不会，为什么？

🛡️ 避坑提醒：不要混淆 App.onLaunch 和 Page.onLoad 的触发时机。App.onLaunch 全局只触发一次，Page.onLoad 对应页面实例只触发一次；但后退回上一页时，上一页的 onLoad 不会再次触发。

📝 面试问答卡片 2 · 页面栈管理与 onShow/onHide 触发时机

  🎯 面试问题：页面栈最大深度是多少？当从页面 A navigateTo 到页面 B、再 navigateBack 回 A，以及 redirectTo 到 B 时，各页面的生命周期分别是怎么触发的？

🧠 面试官考察点：1. 页面栈机制认知；2. 能否区分 navigateTo(入栈)、redirectTo(替换)、navigateBack(出栈) 的生命周期差异；3. 是否知道页面栈上限（10层）及超出后果。

  📌 回答框架：先给出页面栈上限（10层）→ 按三种路由场景逐一说生命周期 → 最后补充超出上限的处理建议（提示用户或使用 redirectTo）。

💡 简短示例回答：页面栈深度上限 10 层。A → navigateTo(B)：A onHide，B onLoad→onShow→onReady。从 B navigateBack：B onUnload，A onShow。A→redirectTo(B)：A onUnload，B onLoad→onShow→onReady。超出 10 层会跳转失败，需要引导用户返回或使用 redirectTo 替换。

🤔 可能追问：
① 如果使用 tabBar 页面，页面栈怎么管理？onShow 会触发吗？
② 如何在 navigateBack 回上一页时传递数据？

🛡️ 避坑提醒：redirectTo 会销毁当前页面，所以不要在跳转前弹未完成请求。另外，tabBar 页面切换不会销毁页面实例，只触发 onShow/onHide，适合做下拉刷新数据更新，但注意避免内存泄漏。

📝 面试问答卡片 3 · 常见场景题（分享、支付、订阅消息等）

  🎯 面试问题：分享按钮点击后页面生命周期有没有变化？如果从一个页面分享到另一个用户，对方点开分享卡片进入小程序，触发的是 onLoad 还是 onShow？商户支付回调结果如何在页面中拿到并更新UI？

🧠 面试官考察点：1. 是否做过真实业务场景；2. 是否理解分享不触发页面生命周期；3. 是否知道小程序冷启动分享卡片会携带 path 和 query 参数；4. 支付回调在 App.onShow 中处理还是 Page 中处理。

  📌 回答框架：先说明分享按钮触发 onShareAppMessage，不影响生命周期 → 用户点开分享卡片进入：冷启动走 onLaunch→onShow→onLoad（path/query），热启动走 onShow（需在 App.onShow 中处理 options）→ 支付回调在 App.onShow 中监听 ref 或 EventChannel 通知目标页面。

💡 简短示例回答：分享不触发任何生命周期。对方冷启动点开卡片：App onLaunch→onShow，Page onLoad(query)。热启动：仅 App onShow，通过 options.path匹配页面。支付回调我在 App.onShow 中检查 scene 是否为 1037（支付），然后通过 getCurrentPages 或全局 Event 通知对应页面更新订单状态。

🤔 可能追问：
① 订阅消息在哪个生命周期订阅最合适？会不会重复弹框？
② 如果小程序被用户从 “最近使用” 点开，是冷启动还是热启动？
③ 多个页面都需要处理支付回调如何设计？

🛡️ 避坑提醒：分享卡片一定要传完整 query 参数。支付回调不要在 Page.onShow 中直接写死逻辑，因为页面可能被销毁或未加载。推荐在 App.onShow 中做统一分发，避免耦合。订阅消息的订阅动作放在用户触发操作后（如点击按钮后调用），不要在 onLoad 中自动弹框。

🏗️ 项目案例 · 电商小程序商品详情页跳转与生命周期优化

  📌 项目名称：某品牌限时抢购小程序

  📌 业务背景：用户从首页秒杀入口进入商品详情页，多次跳转不同商品后返回首页，需要保证价格/库存实时刷新，且不重复加载首页数据。

  📌 规模指标：日活 50w+，每秒最高并发 3000+，页面栈平均深度 4-5 层。

  📌 技术栈：微信小程序原生 + 自定义组件 + EventBus + 全局 store（ mobx-miniprogram ）

🔥 核心难点：
1. 用户连续浏览不同商品详情页（A→B→C），后退回A时 A.onShow 触发，但数据可能还是旧数据；
2. 首页在跳转到详情页后被隐藏，返回时需局部刷新秒杀倒计时和库存；
3. 避免页面栈超出 10 层导致跳转失败。

🤔 面试高频追问（面试官会问）：
① 你怎么确保 A 页面返回时只更新局部数据，而不是重新 onLoad？—— 答：利用 onShow 的生命周期特征，在 onShow 中调用一个独立的刷新函数（比如 refreshData），对比最新的 store 或缓存时间戳，差异小只 patch 局部 setData；
② 页面栈超过 10 层怎么处理？—— 答：在 wx.navigateTo 之前用 getCurrentPages 判断当前栈长度；超过 8 层时自动切换为 redirectTo 或提示用户返回再跳；
③ 秒杀倒计时在切后台再回来后如何秒级同步？—— 答：在 onShow 中向服务端请求最新服务端时间戳打平本地倒计时。

📦 可迁移回答话术：“在类似多页连续跳转场景下，我的通用方案是：保持页面实例存活，利用 onShow 做增量数据同步，减少不必要的 onLoad 开销。同时结合页面栈长度做动态路由控制，确保跳转不失败。这种方案在课程详情页、文章详情页多级跳转场景也可复用。”

💡 讲师提示：项目案例的核心在于你能否把生命周期控制与页面栈管理结合起来，解决真实业务的数据一致性问题。面试官往往希望听到“我不仅知道生命周期顺序，还能用它做性能优化”。所以，准备一个你自己负责过的项目，把上述场景串起来说。