小程序uniapp面试线路

[ 2025.4.22更新 ]

UniApp + 小程序 面试学习线路（七阶段跨平台打怪升级路线）

🎯 目标：掌握基于 UniApp 的小程序开发能力，具备微信/多端适配、组件开发、性能调优、原生交互与项目实战经验，能在各种平台之间活得比项目经理还久。

第一阶段：小程序开发基础

目标：掌握微信/支付宝等主流小程序开发规范与核心架构

1. 小程序原理

• 基于 WebView 的运行架构
• WXML + WXSS + JS 的分层结构
• 生命周期 & 页面栈机制（onLoad, onShow, onHide）

2. 平台差异

• 微信 vs 支付宝 vs 百度 vs 抖音：开发接口不统一
• API 封装方案（wx vs my vs uni）

3. 面试常问

• 微信小程序和 Web App 有什么区别？
• 小程序生命周期和 Vue 生命周期如何配合？

第二阶段：UniApp 基础与原理

目标：理解 uni-app 跨平台机制，掌握 Vue + 小程序打包原理

1. 框架构成

• 基于 Vue 语法开发，HBuilderX 或 CLI 构建
• 一套代码，生成多端目标：微信小程序、App、H5、快应用等

2. 页面结构与生命周期

• pages.json 配置路由
• 页面生命周期（onLoad、onReady、onUnload）
• App.vue 生命周期 & 全局状态管理

3. 面试常问

• UniApp 怎么实现多端编译？
• 页面通信怎么做？页面栈如何管理？

第三阶段：组件开发与状态管理

目标：具备封装组件、全局通信与跨端状态统一能力

1. 组件开发

• 自定义组件：props、emit、插槽
• 使用 easycom 自动引入机制
• 跨平台兼容问题调试（Web/H5 样式问题、原生能力缺失）

2. 状态管理

• Vuex 状态管理用法
• HBuilderX 项目中使用 Pinia（新项目推荐）

3. 面试高频

• 怎么实现一个全局 modal 弹窗组件？
• 如何在小程序中实现组件懒加载？

第四阶段：API 调用与平台能力封装

目标：掌握平台 API 的封装能力，能优雅调用任何小程序 API

1. API 分类

• 网络请求（uni.request）
• 页面跳转、用户授权、系统信息（uni.getSystemInfo、uni.navigateTo）
• Storage、文件、媒体、地图、蓝牙等接口封装

2. 多端兼容技巧

• 使用 process.env.UNI_PLATFORM 判断当前平台
• 微信/抖音/支付宝等平台能力差异兼容策略

3. 面试高频

• uni.request 和原生小程序的 request 有什么区别？
• 如何封装一个兼容所有平台的登录流程？

第五阶段：路由、权限与通信机制

目标：掌握页面路由跳转与复杂页面通信处理能力

1. 路由控制

• uni.navigateTo、uni.redirectTo、uni.switchTab
• 路由拦截器封装（beforeEach 模拟）

2. 页面通信

• eventChannel、Vuex、全局变量
• 组件间通信：props + $emit / ref

3. 权限校验

• 登录拦截、token校验、页面白名单机制
• 页面权限鉴权实现：login → check → redirect

4. 面试高频

• 页面 A 跳转到页面 B 并返回一个值，怎么实现？
• 怎么优雅处理登录拦截和跳转重定向？

第六阶段：性能优化与调试技巧

目标：学会踩坑、识别慢点、控制包体积、避免闪崩

1. 性能优化

• 分包加载机制（subPackages）
• 图片懒加载、预加载数据、骨架屏占位
• uni-app 热启动优化技巧

2. 调试技巧

• Chrome 调试（H5）、微信小程序开发者工具
• 使用 $mp 获取平台信息
• 内存泄漏排查、事件解绑

3. 面试重点

• 小程序加载慢怎么优化？
• UniApp 打包后太大了，怎么减包体积？

第七阶段：项目实战与架构设计

目标：输出一套结构清晰、可复用、高拓展性的项目骨架

1. 项目结构设计

• 页面分包、模块按业务拆分
• API 接口集中管理（axios 封装 or uni.request 包装）
• 全局混入（mixin）+ 指令封装 + 过滤器函数

2. 原生能力拓展

• 使用原生组件（renderjs）
• 使用插件市场组件（uView、ColorUI、NutUI）

3. 面试综合题

• 给你一个商城类小程序项目，你如何组织路由和状态管理？
• 如何设计一个组件库可复用于多个业务项目？

附录：面试高频问题 TOP 10

1. UniApp 支持哪些平台？原理是什么？
2. Vue 的响应式在小程序端是怎么实现的？
3. 小程序中如何管理组件通信？
4. 怎么在 UniApp 中判断当前运行环境？
5. 页面栈最大是多少？怎么做多级跳转回退？
6. 怎么封装一个统一的网络请求拦截器？
7. 小程序中如何做图片懒加载和骨架屏？
8. 为什么我改了组件没生效？缓存问题怎么破？
9. 使用 uView 和 NutUI 有什么区别？你喜欢哪个？
10. 如果用户频繁重复点击按钮，怎么防抖？

推荐资料 & 实战项目

• 📘 官方文档：
  • UniApp：https://uniapp.dcloud.io
  • 微信小程序：https://developers.weixin.qq.com
• 🧰 开发工具：
  • HBuilderX（UniApp 官方 IDE）
  • 微信小程序开发者工具
• 🧪 项目练习：
  • 多端记账 App（小程序 + H5 一体）
  • 电商小程序（商品列表 + 支付 + 分包）
  • 后台管理小程序（admin 端 + 权限系统）