## 前言

UniApp 是目前国内中小程序、混合APP、H5多端统一开发的绝对主流框架。几乎所有移动端前端、跨端岗位面试必问。

本文摒弃碎片化知识点，从核心原理 → 工程目录 → 生命周期 → 路由跳转 → 跨端适配 → 常见坑点 → 性能优化 → 面试标准答案完整梳理，适合项目复盘、面试突击、技术沉淀，全文干货可直接收藏背诵。

一、UniApp 是什么？核心优势与适用场景

1.1 定义

UniApp 是基于 Vue.js 的跨端开发框架，一套代码可同时编译发布到：

• 微信/支付宝/百度/抖音小程序

• iOS、Android 原生APP

• H5 网页端

1.2 核心优势（面试必背）

• 一次开发、多端复用：极大降低多端开发、维护成本

• 语法贴合Vue：上手成本极低，Vue开发者无缝切换

• 原生渲染、性能优秀：APP、小程序端均为原生渲染，优于WebView套壳方案

• 生态成熟：插件市场丰富、官方更新稳定、企业普及率极高

• 条件编译能力强大：轻松处理各平台差异化适配

1.3 对比其他跨端框架

• 优于 React Native：学习成本更低、国内生态更好、小程序端碾压

• 优于 Flutter：不用学新语言、迭代更快、业务落地更轻量

• 优于 纯WebView混合开发：原生渲染、体验更好、权限能力更强

---

二、UniApp 跨端核心原理（面试高频）

UniApp 实现多端统一的核心机制：编译时转换 + 运行时适配双层架构。

2.1 编译时（打包阶段）

通过 AST 抽象语法树解析 Vue 代码，根据目标平台，将模板、样式、JS 逻辑编译为对应平台原生代码：

• 编译小程序：Vue模板 → wxml、wxss、js、json

• 编译H5：输出标准 Vue 项目代码

• 编译APP：转换为原生渲染引擎可识别的代码，脱离WebView

2.2 运行时（运行阶段）

统一封装 uni 全局 API，抹平各平台差异，开发者调用统一接口，框架内部自动适配各平台底层能力。

---

三、核心工程目录与配置文件（必考）

新手最容易混乱的就是四大核心文件，面试高频提问各自作用。

3.1 pages.json 【最重要】

全局页面配置文件，所有页面、导航栏、tabbar、权限都在这里控制

核心作用：

• 注册页面路由、配置页面路径

• 全局/单页导航栏样式、标题、颜色

• 底部 tabBar 配置

• 下拉刷新、页面旋转、权限窗口配置

3.2 manifest.json

项目整体打包、权限、平台配置文件

核心作用：

• APP端：应用名称、图标、启动页、权限、第三方SDK配置

• 小程序端：AppID、分包、编译配置

• H5端：路由模式、打包配置

3.3 App.vue

全局根组件

• 全局样式、全局生命周期监听

• 无法写模板DOM，仅负责全局状态与样式

3.4 main.js

项目入口文件，全局挂载方法、全局过滤器、全局状态、第三方库。

3.5 uni.scss

全局样式变量文件，所有页面可直接使用定义好的颜色、尺寸、圆角变量，无需单独引入。

---

四、UniApp 完整生命周期（面试重中之重）

分为：应用生命周期 + 页面生命周期 + 组件生命周期

4.1 应用生命周期（App.vue 专属）

• onLaunch：应用首次启动触发（全局仅一次）

• onShow：应用从后台切前台、启动展示时触发

• onHide：应用从前台切后台触发

• onError：全局错误捕获

4.2 页面生命周期（页面页面级）

• onLoad(option)：页面加载，接收路由参数（仅一次）

• onShow：页面每次显示都会触发（返回、切换tab都会执行）

• onReady：页面初次渲染完成（仅一次）

• onHide：页面隐藏

• onUnload：页面卸载销毁

高频面试坑：onLoad 只执行一次，onShow 可多次执行；接口请求一般放 onLoad，刷新数据放 onShow。

4.3 组件生命周期

兼容 Vue 生命周期：created、mounted、updated、destroyed

注意：UniApp 组件没有 onLoad，组件初始化逻辑写在 mounted。

---

五、UniApp 路由与页面跳转（业务高频）

5.1 五种跳转方式与区别

• uni.navigateTo：保留当前页，跳转到新页面（最常用）

• uni.redirectTo：关闭当前页，跳转新页面（无法返回上一页）

• uni.reLaunch：关闭所有页面，打开新页面（清空页面栈）

• uni.switchTab：切换 tabBar 页面，同时关闭其他非tab页面

• uni.navigateBack：返回上一页/多级页面（delta参数控制层数）

5.2 路由传参

跳转页面拼接参数，目标页面 onLoad(option)接收

// 传参 uni.navigateTo({ url: '/pages/detail/detail?id=100&name=uniapp' }) // 接收 onLoad(option){ console.log(option.id) }

---

六、跨端适配核心方案（UniApp 核心考点）

6.1 单位适配 rpx

rpx 是 UniApp 核心自适应单位

规则：屏幕宽度统一 750rpx，框架自动根据不同设备屏幕换算px，实现全端自适应。

开发统一使用 rpx，不再写固定 px。

6.2 条件编译（多端差异化必备）

一套代码区分不同平台，解决各平台API、样式、逻辑差异。

// #ifdef H5 H5端专属代码 // #endif // #ifdef MP-WEIXIN 微信小程序专属代码 // #endif // #ifdef APP-PLUS APP端专属代码 // #endif

6.3 平台差异化文件

同目录下创建页面.mp.vue、页面.h5.vue，框架自动根据编译平台优先加载对应平台文件。

---

七、网络请求与本地存储

7.1 统一网络请求 uni.request

UniApp 抹平各平台请求差异，全局统一 uni.request，项目中一般二次封装：统一baseUrl、拦截器、loading、错误提示、token携带。

7.2 本地持久化存储

• uni.setStorageSync：同步存储（常用，简单数据）

• uni.getStorageSync：同步获取

• uni.removeStorageSync：删除缓存

• uni.clearStorageSync：清空所有缓存

注意：存储对象无需手动 JSON.stringify，uni 内部自动序列化。

---

八、UniApp 高频面试坑点（必背避坑）

8.1 data 必须是函数

页面、组件的 data 必须返回函数，否则页面缓存数据不会销毁，再次打开页面会复用旧数据。

// 正确 data(){ return { name: '' } } // 错误 data: { name: '' }

8.2 页面栈限制

小程序页面栈最多10层，层级过深会无法跳转，需要配合 reLaunch、redirectTo 清理页面栈。

8.3 tabBar 页面特殊性

tabBar 页面无法通过 navigateTo 跳转，必须使用 switchTab；且 tabBar 页面不触发 onUnload。

8.4 样式隔离问题

小程序端样式有隔离，H5、APP 全局样式容易污染，多端开发尽量使用 scoped 局部样式。

---

九、UniApp 性能优化方案（面试加分项）

• 分包加载：小程序、APP开启分包，减少首屏打包体积，提升启动速度

• 图片优化：统一使用rpx、图片压缩、懒加载

• 避免频繁setData：合并数据更新，减少视图层通信次数（小程序核心优化）

• 页面缓存策略：合理利用onShow刷新数据，避免重复请求

• 减少全局监听：全局事件及时销毁，防止内存泄漏

• 条件编译剥离冗余代码：打包时剔除无用平台代码

---

十、高频面试简答题（直接背诵）

1. UniApp 和小程序原生的区别？

UniApp 基于Vue语法，一套代码多端发布，开发效率高；原生小程序仅能开发微信小程序，语法专属、无法跨端，适合极致定制化项目。

2. UniApp APP端是WebView吗？

不是。UniApp APP端采用原生渲染引擎，非WebView套壳，性能接近原生APP。

3. onShow 和 onLoad 区别？

onLoad 页面初次加载执行一次，用于初始接口请求、参数接收；onShow 页面每次显示都会执行，用于页面刷新、数据更新。

4. rpx 和 px 区别？

px 固定像素，多端适配差；rpx 以750宽度为基准，框架自动适配不同设备，是UniApp专属自适应单位。

---

结语

UniApp 面试核心不在于冷门API，而在于：原理通透、生命周期清晰、多端适配熟练、避坑意识强、优化思路到位。

本文覆盖 90% 企业UniApp面试高频考点，通读一遍可搞定初级、中级前端跨端岗位面试与项目开发复盘。