前言
很多前端面试问到小程序，只背页面生命周期、双向绑定。但企业面试更看重：真机坑、分包加载、权限、图片上传、性能优化、UniApp 跨端差异、和 Web 项目的区别。 小程序环境不是浏览器，是双线程模型，很多 Web 端写好的逻辑直接搬过来会失效。下面全部是项目实战衍生的拓展面试题。
一、底层基础拓展（双线程模型，面试高频加分题）
1. 微信小程序双线程模型是什么？为什么要设计成双线程？UniApp 打包到小程序之后，双线程还存在吗？
答案： 小程序分为逻辑层 (AppService) 和渲染层 (WebView)，两个线程独立运行，通过native层进行通信。
- 渲染层：负责页面渲染、wxml/wxss，处理视图；
- 逻辑层：JS 代码执行，处理业务逻辑、接口请求。
设计目的：防止 JS 执行阻塞页面渲染。浏览器是单线程，JS 长时间运算会卡死页面；小程序 JS 跑在独立线程，不会阻塞视图渲染。 但是代价：逻辑层和渲染层通信是异步，频繁通信会有性能损耗。
UniApp 编译到微信小程序平台，最终产物依然是微信小程序，双线程模型保留。UniApp 只是编译工具，不改变小程序底层运行机制。
业务坑点： 不要频繁setData，每次 setData 都会把数据从逻辑层传给渲染层，大量数据传输会造成页面卡顿。
2. setData 的原理，为什么不建议一次性传入超大对象？
答案： setData的作用：把 JS 的数据，异步拷贝到渲染层，驱动视图更新。 不是直接修改视图，是跨线程数据传输。
- 大数据：一次性传递几 MB 数据，序列化 + 传输开销很大，页面卡顿；
- 频繁调用：短时间多次 setData，会堆积通信任务。
✅业务最佳实践：
UniApp 中this.$set、ref/reactive底层最终也会转化为小程序 setData。
二、分包、包体积（上线必考点）
3. 小程序分包是什么？为什么要分包？分包加载机制有哪些限制？
答案： 小程序主包默认 2M，整体所有分包合计上限 20M（微信当前规则）。
- 主包：必须包含app.json、tabbar 页面，项目入口；主包会在小程序打开时直接下载。
- 分包：把非首页、低频页面拆成独立包，用到的时候才按需下载，减少小程序首次打开加载时间。
限制：
UniApp 项目打包小程序，pages 目录默认主包；subPackages 配置分包。
4. 分包和独立分包的区别？什么时候使用独立分包？
答案： 普通分包：依赖主包，打开分包页面前，必须先下载主包。 独立分包：不依赖主包，可以直接打开独立分包页面，不用下载主包。 适用场景：活动页、分享落地页，用户扫码直接打开活动页面，不需要加载整个小程序主包。 限制：独立分包无法读取 app.js 里定义的全局变量。
三、权限、登录流程（业务高频，几乎所有小程序项目都有）
5. 微信小程序完整登录流程是什么？wx.login什么时候调用？为什么不能后端直接拿前端 code 换取 openid 之后存储，永久使用？
答案：
关键点： code只能使用一次，五分钟有效期。 session_key 会过期，不能永久有效。不能把 openid 放在前端存储用来鉴权，openid 仅仅是用户标识，不能当做登录凭证。
拓展坑：wx.login不要在页面 onLoad 无脑重复调用，会覆盖 session_key，导致解密手机号、头像失败。一般登录失效时再调用。
6. 小程序获取用户手机号有哪些方式？新版小程序为什么无法直接一键获取手机号？
答案： 旧版本：wx.getUserInfo可以直接拿到用户手机号，微信已经废弃。 当前规则：手机号获取必须由用户主动点击按钮触发，绑定 button 组件open-type="getPhoneNumber"，拿到加密信息，传给后端用 session_key 解密得到手机号。 不能自动拉起，必须用户手动点击，微信限制是为了保护用户隐私。
UniApp 写法：open-type="getPhoneNumber"，监听getphonenumber事件。
四、图片上传、预览、文件处理（后台业务常见）
7. 小程序图片上传，wx.uploadFile 有什么限制？多张上传怎么处理？
答案： wx.uploadFile一次只能上传一张文件，原生 API 不支持多文件同时上传。 限制：单个文件大小上限 10M。 业务方案： 多图上传有两种方案：
坑点：小程序网络请求超时时间默认 60s，大图上传容易超时；需要做 loading、失败重试、进度监听。
8. uni.previewImage 和 wx.previewImage 的坑点？预览网络图片域名需要配置什么？
答案： 小程序预览图片，所有网络图片域名必须在微信公众平台后台配置 downloadFile 合法域名，否则预览失败。 坑：预览时如果图片地址带参数，域名校验也会匹配；本地临时文件路径不需要域名校验。 UniApp 跨端：在 H5 端 previewImage 逻辑不一样，小程序端最终还是调用微信原生 api。
五、UniApp 跨端专项（面试常问：UniApp 开发小程序的坑）
9. UniApp 一套代码多端编译，开发微信小程序时，最常见的平台差异有哪些？
答案：
条件编译是 UniApp 跨端核心手段，用来隔离不同平台的差异化代码。
10. UniApp 中 rpx 是什么？和 px 的区别？rpx 转 px 规则？
答案： rpx：响应式像素，小程序独有单位。规定屏幕宽度 750rpx。 换算：在任何设备，750rpx = 屏幕完整宽度。 iPhone 宽度 375px，750rpx = 375px，所以 1rpx = 0.5px。 优势：自动适配不同宽度手机，不用媒体查询。
H5 端 UniApp 会自动把 rpx 编译成 px。
六、页面通信、存储、路由
11. 小程序页面之间通信方式有哪些？各自适用场景？
12. wx.storage 有什么限制？和浏览器 localStorage 区别？
答案： 小程序 storage：单个 key 上限 1M，总容量上限 10M；只能存字符串；同步 API wx.setStorageSync，异步wx.setStorage。 区别：
业务规范：不要把大量列表数据存入 storage，只存 token、用户基础配置这类少量信息。
七、性能优化 & 上线排查
13. 小程序性能优化手段，从首屏、渲染、网络三个维度说说
首屏优化：
渲染优化：
网络优化：
14. 小程序原生组件和自定义组件的区别，原生组件有什么坑？
答案： 原生组件（camera、video、map、canvas）是微信客户端原生渲染，层级高于普通 webview 渲染组件。 坑：原生组件层级最高，普通 view、弹窗浮层盖不住原生组件；不能用 z-index 控制。 解决办法：弹窗弹出时临时隐藏原生组件。
八、简答背诵汇总（面试快速复习）
结语
小程序和 Web 前端开发最大差别：环境限制多、有包体积限制、域名白名单、隐私权限严格、双线程通信限制。很多 Web 端写起来很简单的功能，放到小程序里都会有各种限制。 掌握上面这些，面试时不再只会背诵生命周期，可以讲业务落地和踩坑经验，拉开和其他候选人差距。
