第2章：小程序技术基础高频问题
本章聚焦面试最高频的四大基础模块：生命周期、组件通信、WXML/WXSS核心机制、路由跳转。以下先通过一张回答框架图建立全局思考路径，再拆解为3个典型面试问答卡片，最后用一个真实项目模板串联所有知识点。
面试问答卡片（3/3）
Q1：请简述小程序的生命周期，包括页面和组件生命周期。
🎯 考察点：
- 是否清楚应用、页面、组件三类生命周期及其触发时机
- 能否区分 onLoad / onShow / onReady / onHide / onUnload 执行顺序
- 能否举例说明生命周期在数据初始化、埋点、资源清理中的典型用法
📐 回答框架：分类 + 顺序 + 场景 + 注意（坑）
📝 示例回答：小程序生命周期分为应用（onLaunch/onShow/onHide）、页面（onLoad→onShow→onReady→onHide→onUnload）和组件（created→attached→ready→detached）。常用于数据请求（onLoad）、埋点（onShow）、定时器清理（onHide）。注意：页面跳转再返回会触发 onShow 但不会再次 onLoad；组件内不要直接依赖页面 onLoad。
❓ 可能追问：
- 页面A → B → 返回A，A的生命周期分别如何执行？
- 组件 attached 和页面 onReady 哪个先执行？
- 如何监听小程序从后台切回前台？
Q2：小程序组件间如何通信？列举主要方式及适用场景。
🎯 考察点：
- 是否掌握父子（props/events）、兄弟（全局数据/Store）、跨页面（EventChannel）、多层级（relations）通信方式
- 能否根据业务场景选择合适的通信方式
- 对通信性能（避免频繁 setData）是否有意识
📐 回答框架：分类列举 → 方式原理 → 优缺点 → 推荐使用
📝 示例回答：父子通信：父传子用 properties，子传父用 triggerEvent。兄弟通信：通过 getApp() 全局对象或 mobx-miniprogram。跨页面通信：使用 wx.EventChannel 传递复杂数据。多层级：使用 relations 或抽象节点。建议：简单场景用 props + events，复杂状态用全局 Store 避免层层传递。
❓ 可能追问：
- triggerEvent 如何传递多个参数？
- 兄弟组件通过全局对象通信会有什么性能隐患？
- 如何利用组件 relations 实现自定义 tab 组件联动？
Q3：小程序的路由跳转方式有哪些？如何传递参数？页面栈怎么管理？
🎯 考察点：
- 是否熟悉 navigateTo、redirectTo、switchTab、reLaunch、navigateBack 五种方式
- 参数传递方式（url query、EventChannel）
- 页面栈深度限制（10层）及 overflow 处理
📐 回答框架：列方式 → 参数传递 → 页面栈原理 → 特殊情况（switchTab 不能带参数等）
📝 示例回答：路由方式：navigateTo（保留当前页，栈增）、redirectTo（关闭当前页，栈不变）、switchTab（清空非tab页）、reLaunch（关闭所有页）、navigateBack（回退）。参数通过 url?key=value 或 EventChannel。注意：navigateTo 栈最多10层，超限用 redirectTo；switchTab 不能传 query 参数，需借助全局变量。
❓ 可能追问：
- navigateTo 和 redirectTo 在页面栈上的实际区别？
- 如何通过 EventChannel 实现页面间传递对象数据？
- navigateBack 返回时如何刷新前一个页面？
🏗️ 项目案例：真实模板
以下项目模板将生命周期、组件通信、WXML/WXSS 优化、路由跳转全部融入实际场景，面试时可直接套用。
| 维度 | 内容 |
|---|---|
| 项目名称 | 轻享拼团（社区电商小程序） |
| 业务背景 | 帮助社区团长发起拼团，用户参团购买商品，支持商品浏览、拼团下单、支付、订单管理。 |
| 规模指标 | 日活 5 万+，商品 SKU 1 万+，峰值拼团活动 3000/天，页面总数 30+，自定义组件 80+。 |
| 技术栈 | 原生小程序（WXML/WXSS/JS）+ 云开发（数据库、云函数）+ WeUI + mobx-miniprogram（状态管理）+ rpx 适配。 |
| 核心难点 |
|
| 面试高频追问 |
|
| 可迁移回答话术 | “我负责的拼团项目中，通过页面生命周期（onShow/onHide）统一管理定时器，避免内存泄漏；商品列表采用虚拟滚动，只渲染可视区域+上下缓冲区，列表滑动性能提升 60%；组件通信使用父子 props + mobx Store，保证购物车状态实时同步且不触发多余渲染；路由方面设计了页面栈监控，当栈深度 >8 时自动降级为 redirectTo 防止白屏；主题使用纯 CSS 变量方案，并通过 @supports 做降级。” |