uni-app 面试知识点梳理一、基础认知必问1.1 一句话定义1.2 跨端原理高频1.3 uni-app 与 Vue 的关系1.4 Vue2 与 Vue3 选型面试加分点二、项目结构与配置2.1 标准目录2.2 pages.json核心配置必会2.3 标签映射易踩坑三、生命周期高频重灾区3.1 三层生命周期3.2 页面 vs 组件生命周期执行顺序经典题3.3 onLoad 与 onShow 区别必背四、路由与跳转4.1 五种跳转 API4.2 传参与接收4.3 路由拦截五、网络请求与封装实战必考5.1 原生请求5.2 面试级封装要点5.3 文件上传/下载六、状态管理Vuex / Pinia6.1 何时需要6.2 Vuex 经典结构6.3 PiniaVue3 推荐6.4 跨页传值替代方案七、条件编译uni-app 特色必考7.1 语法7.2 各位置写法7.3 常用平台标识八、小程序专项结合实际项目重点8.1 登录流程微信小程序必考8.2 分包加载性能关键8.3 rpx 单位8.4 微信支付九、组件通信Vue 通用 uni 特有9.1 通信方式对比9.2 组件生命周期在 uni 中的注意点十、性能优化高频十一、易踩坑清单实战血泪十二、uni-app X 与新趋势加分十三、高频面试题 30 连击自测附答题模板STAR 简化版定位求职技术岗uni-app / 小程序前端面试速通。范围以微信小程序为主战场兼顾 H5 / App。Vue2 Vue3 双栈覆盖。用法每个模块先看核心结论再看面试题最后对照易踩坑。一、基础认知必问1.1 一句话定义uni-app 是DCloud 出品的、基于 Vue 语法的跨端应用框架一套代码可编译到微信/支付宝/百度/抖音小程序、H5、AppiOS/Android、快应用等。1.2 跨端原理高频层作用说明编译器cli/ide把 Vue SFC 编译成各平台目标代码小程序.vue→wxml/wxss/js/jsonH5标准 VueAppweex/uts运行时runtime抹平各平台 API 差异uni.xxx调用在底层映射到wx.xxx/navigator/plus条件编译差异化代码#ifdef MP-WEIXIN ... #endif关键结论uni-app Vue 语法 平台编译器 统一运行时。它不是套壳 webview小程序端是原生组件渲染。1.3 uni-app 与 Vue 的关系模板、数据绑定、组件、生命周期沿用了 Vue。小程序平台下没有 DOM/BOMdocument、window、localStorage在小程序端不存在 → 必须用uni.xxx替代。Vue3 版本使用 Vite 编译性能与 Tree-shaking 更优Vue2 版本逐步进入维护态。1.4 Vue2 与 Vue3 选型面试加分点维度Vue2OptionsVue3Composition Vite编译器vue-cli / HbuilderXVite更快响应式Object.definePropertyProxy写法data(){return{}}/methodssetup()/script setup状态管理VuexPinia官方推荐兼容性老项目多新项目首选二、项目结构与配置2.1 标准目录├─ pages/ # 页面每个页一个文件夹 │ ├─ index/index.vue ├─ components/ # 自定义组件 ├─ static/ # 静态资源图片等不被编译 ├─ store/ # Vuex/Pinia ├─ utils/ # 工具request 封装等 ├─ App.vue # 应用入口应用生命周期 ├─ main.js # 入口脚本 ├─ pages.json # ★ 路由 全局样式 分包配置 ├─ manifest.json # 应用配置appid、名称、图标 └─ uni.scss # 全局样式变量2.2 pages.json核心配置必会{pages:[{path:pages/index/index,style:{navigationBarTitleText:首页}}],globalStyle:{navigationBarBackgroundColor:#007AFF},tabBar:{list:[{pagePath:pages/index/index,text:首页,iconPath:...}]},subPackages:[{root:packageA,pages:[{path:list/list}]}],preloadRule:{pages/index/index:{network:all,packages:[packageA]}}}面试题pages数组第一项是什么→ 应用启动页首页。2.3 标签映射易踩坑HTMLuni-appdivviewspanatextimgimageinputinput/textareaulli无用view模拟注意text内只能嵌套文本/文本组件放view不生效。三、生命周期高频重灾区3.1 三层生命周期层级钩子触发时机应用级App.vueonLaunch应用初始化全局一次应用级onShow/onHide应用前台/后台页面级onLoad(options)页面加载传参在这里接收页面级onShow/onReady/onHide/onUnload显示/渲染完成/隐藏/卸载组件级Vue2created/mounted等同 Vue组件级Vue3onMounted等需 import组合式3.2 页面 vs 组件生命周期执行顺序经典题页面 onLoad → 组件 created → 组件 mounted → 页面 onReady页面onLoad早于组件mounted。页面切走onHide再回来onShow组件不重新创建故created不重复。3.3 onLoad 与 onShow 区别必背onLoad页面创建时执行一次适合初始化、options取参。onShow每次显示都执行适合刷新数据如从详情页返回列表需刷新。四、路由与跳转4.1 五种跳转 APIAPI表现是否可返回栈上限navigateTo打开新页是10 层redirectTo替换当前页否—switchTab跳 tabBar 页否—reLaunch关闭所有重开否—navigateBack返回——易踩坑switchTab不能传参URL 参数会被忽略跨 tab 传值要用全局状态/本地缓存。navigateTo超过 10 层会失败需redirectTo或reLaunch兜底。4.2 传参与接收// A 页uni.navigateTo({url:/pages/detail/detail?id123nametest})// B 页 onLoadonLoad(options){console.log(options.id,options.name)// 123 test均为字符串}接收值永远是字符串数字需Number()转换。4.3 路由拦截全局在App.vue的onShow中根据uni.getLaunchOptionsSync()/ 页面栈做权限判断。推荐用uni.addInterceptor(navigateTo, {...})做统一登录校验实战常用。五、网络请求与封装实战必考5.1 原生请求uni.request({url:https://api.example.com/list,method:GET,data:{page:1},header:{Authorization:token},success:(res){},fail:(err){}})5.2 面试级封装要点Promise 化用return new Promise包裹支持async/await。拦截器请求前注入 token响应后统一处理 401/状态码。错误统一处理网络错误、业务错误码分层。baseURL 环境切换dev / prod 通过条件编译或 env 区分。// utils/request.js 简化版constBASE_URLhttps://api.example.comexportfunctionrequest(options){returnnewPromise((resolve,reject){uni.request({url:BASE_URLoptions.url,method:options.method||GET,data:options.data,header:{Authorization:uni.getStorageSync(token)||},success:(res){if(res.statusCode200res.data.code0)resolve(res.data)elseif(res.data.code401){uni.navigateTo({url:/pages/login/login});reject(res.data)}elsereject(res.data)},fail:reject})})}5.3 文件上传/下载上传uni.uploadFile({ url, filePath, name:file, formData })下载uni.downloadFile→ 拿到临时路径 →uni.saveFile小程序端不能直接操作本地文件系统路径只能拿到临时路径。六、状态管理Vuex / Pinia6.1 何时需要跨页面共享用户信息、登录态、购物车。全局配置主题、地区。6.2 Vuex 经典结构// store/index.jsimportVuefromvueimportVuexfromvuexVue.use(Vuex)exportdefaultnewVuex.Store({state:{token:},mutations:{setToken(s,v){s.tokenv}},actions:{login({commit},payload){/* 异步 */commit(setToken,payload)}},getters:{isLogin:s!!s.token}})6.3 PiniaVue3 推荐无mutationsstate/actions/getters更直接。天然支持 Composition APIstoreToRefs解构保持响应性。6.4 跨页传值替代方案场景方案兄弟/跨多级页Vuex/Pinia简单临时uni.setStorageSync页面栈直取getCurrentPages()取上一页setData七、条件编译uni-app 特色必考7.1 语法// #ifdef MP-WEIXINconsole.log(只在微信小程序编译)// #endif// #ifndef H5console.log(除了 H5 都编译)// #endif// 多平台// #ifdef MP-WEIXIN || MP-ALIPAY7.2 各位置写法位置写法模板!-- #ifdef MP-WEIXIN --样式/* #ifdef MP-WEIXIN */脚本// #ifdef MP-WEIXIN7.3 常用平台标识MP-WEIXINMP-ALIPAYMP-BAIDUMP-TOUTIAOH5APP-PLUSAPPMP所有小程序。八、小程序专项结合实际项目重点8.1 登录流程微信小程序必考1. 前端 uni.login() → 拿到 code 2. 把 code 发给后端 3. 后端用 code appsecret 调微信接口换 openid/session_key 4. 后端生成自定义 token 返回前端 5. 前端存 token后续请求携带注意code 只能用小程序的wx.login/uni.login换不能前端直接拿 openid安全。8.2 分包加载性能关键主包过大微信限制2MB主包会导致无法预览/上传 → 必须分包。分包通过subPackages配置独立打包使用时按需下载。分包预下载preloadRule优化首跳体验。8.3 rpx 单位750rpx 屏幕宽度自适应各机型。设计稿通常按 750px 出图1:1 写 rpx。注意rpx 有个别机型 rounding 误差关键尺寸可用 px 兜底。8.4 微信支付前端uni.requestPayment({ provider:wxpay, timeStamp, nonceStr, package, signType, paySign })参数由后端统一下单生成前端只负责调起。九、组件通信Vue 通用 uni 特有9.1 通信方式对比方式适用说明props/$emit父子标准provide/inject跨层Vue 原生uni.$on/uni.$emit任意组件uni 事件总线需uni.$off销毁防内存泄漏Vuex/Pinia全局状态ref父调子方法this.$refs.child.fn()9.2 组件生命周期在 uni 中的注意点小程序组件无onShow只有 Vue 的created/mounted等。需监听页面显示时用uni.$on(pageShow)在页面onShow中触发。十、性能优化高频分包控制主包 2MB。图片用 CDN 压缩避免本地大图lazy-load懒加载。长列表数据量大用uni.createIntersectionObserver或虚拟列表避免一次性渲染。v-for 必须 key用稳定 id不用 index小程序重排 bug。减少 setData 频率/体积小程序 setData 有性能成本合并数据、避免传大对象。onLoad 初始化 / onShow 轻量刷新别在onShow做重活。组件按需引入非全局组件局部注册。十一、易踩坑清单实战血泪坑现象解决小程序无 window/document报错 undefined用 uni API 替代switchTab 传参无效收不到用 storage/store页面栈超 10 层navigateTo 失败redirectTo/reLaunchrpx 误差个别机型错位关键尺寸 px事件总线未 off重复触发页面 onUnload 中$off本地图片过大主包超限转 CDN / 分包H5 端跨域请求失败配 proxy 或后端 CORS真机与模拟器差异样式/API 不一致必须真机调试v-if 与 v-for 同元素警告/逻辑错拆开或用 computed 过滤自定义组件样式隔离外部样式不生效options:{styleIsolation:shared}或::v-deep十二、uni-app X 与新趋势加分uni-app x用utsTypeScript 风格直接编译为原生Kotlin/Swift性能接近原生但生态尚在完善。Vue3 Vite已成新项目默认。uniCloudDCloud 的 serverless前后端一体。面试时如能对比传统编译型 vs uni-app x 原生型体现技术视野。十三、高频面试题 30 连击自测uni-app 跨端原理是什么Vue2 和 Vue3 在 uni-app 中的区别页面生命周期与组件生命周期执行顺序onLoad 和 onShow 的区别与适用场景小程序为什么没有 DOM如何替代五种路由 API 及使用区别switchTab 为什么不能传参怎么解决页面栈上限是多少超限怎么办如何封装 uni.request401 怎么统一处理微信小程序登录流程code 能在前端直接换 openid 吗为什么什么是分包为什么要分包主包限制分包预下载有什么用rpx 是什么设计稿怎么对应条件编译语法常用平台标识如何在 H5 和小程序写不同代码Vuex 和 Pinia 区别uni 推荐哪个跨页面传值有哪些方式uni.$on 需要注意什么父子组件通信方式provide/inject 适用场景小程序支付流程谁生成签名如何做路由拦截/登录校验长列表如何优化setData 为什么有性能成本如何优化v-for 为什么必须 key能用 index 吗真机调试为什么必要事件总线内存泄漏怎么避免uni-app x 相比传统方案优势附答题模板STAR 简化版被问原理类先一句话结论 → 再讲分层/流程 → 举项目中的例子。被问优化类先说现象/指标 → 再给手段分包/懒加载/合并 setData→ 讲你项目里做到了哪一步。