小程序面经
核心考点
1. 双线程架构
- 渲染层（WebView）：负责 WXML/WXSS 渲染，每个页面一个 WebView
- 逻辑层（JS Engine / V8）：执行业务逻辑，独立线程，无法直接操作 DOM
- 通信：通过 JSBridge 与 Native 通信，数据经序列化传递
- 优点：安全（逻辑层无法直接操作 UI）；缺点：通信有延迟，setData 数据量大性能差
2. 生命周期
App: onLaunch → onShow → onHide → onError
Page: onLoad → onShow → onReady → onHide → onUnload
- onLoad：只执行一次，接收页面参数
- onReady：页面初次渲染完成
- onShow / onHide：前后台切换时触发
3. 性能优化
- setData 优化：只传变化的数据，避免大对象；使用路径更新
'list[0].name' - 列表渲染：
wx:key必须设置，避免重复渲染 - 图片懒加载：
lazy-load属性 - 分包加载：主包 < 2MB，总包 < 20MB，按需加载分包
- 骨架屏：提升首屏体验
4. 与 H5 / App 的区别
| 对比 | 小程序 | H5 | App |
|---|---|---|---|
| 运行环境 | 微信/支付宝等宿主 | 浏览器 | 原生系统 |
| 发布 | 需审核 | 随时 | 需审核 |
| 能力 | 受宿主限制 | 受浏览器限制 | 几乎无限制 |
| 体验 | 接近原生 | 较差 | 最好 |
5. 跨端框架对比
| 框架 | 原理 | 优缺点 |
|---|---|---|
| Taro | 编译时转换 | React 语法，生态好，编译有差异 |
| uni-app | 运行时 + 编译 | Vue 语法，覆盖平台多 |
| mpx | 增强编译 | 贴近原生写法，性能好 |
6. 高频面试题
- 小程序登录流程：wx.login 获取 code → 后端换取 openid + session_key → 返回自定义 token
- WXS 是什么：在渲染层运行的脚本，可减少逻辑层通信，提升性能
- 自定义组件通信：父→子 properties；子→父 triggerEvent；兄弟通过父或 EventBus
- 为什么不能用 window/document：逻辑层没有 DOM/BOM 环境
- 微信支付流程：后端下单 → 返回支付参数 → 前端 wx.requestPayment → 回调处理