UniApp 专属高频题（差异化优势）

本章管什么：多端编译、条件编译、页面生命周期、路由跳转、分包、rpx、体积与权限等 Uni / 小程序差异。

本章不管什么：纯 Vue 用法 → Vue2 / Vue3；H5 工程 Vite / 性能通识 → 工程化；框架选型 → 架构。

UniApp 的多端编译原理是什么？

写一套 Vue 风格代码，由 UniApp 编译器按目标平台转成对应产物：

• H5 → Web 资源
• 微信等小程序 → 各端小程序代码结构
• App → 原生运行时 + 前端资源（如 App-Plus）

思路：统一 DSL + 条件编译 + 各端运行时/组件映射。一套业务代码，平台差异用条件编译和平台 API 抹平。

🎤 口述精简版

UniApp 是一套代码多端编译：源码编译成 H5、小程序或 App 各自能跑的产物，公共逻辑复用，差异靠条件编译和平台 API。

什么是条件编译？#ifdef、#ifndef 的使用场景？

条件编译：编译期按平台保留/剔除代码，避免端上跑到不支持的 API。

// #ifdef H5
console.log('仅 H5')
// #endif

// #ifndef MP-WEIXIN
console.log('非微信小程序')
// #endif

场景：仅某端才有的 API、样式差异、第三方 SDK 差异。

🎤 口述精简版

#ifdef 表示「是这个平台才编译进去」，#ifndef 表示「不是这个平台才保留」。用来隔离各端差异代码。

UniApp 中 H5、小程序、App 的生命周期差异？

端	特点
应用级	onLaunch / onShow / onHide 等，三端都有，细节略有差别
页面级	小程序/App 有 onLoad、onShow、onReady、onUnload 等
H5	更接近 Vue 生命周期；也有 Uni 页面生命周期，但和浏览器路由行为相关
组件	多用 Vue 生命周期；页面生命周期主要在页面里

口诀：页面进出看 Uni 页面生命周期；组件内部逻辑看 Vue 生命周期。

🎤 口述精简版

三端都有应用和页面生命周期，但实现细节不同。业务上页面用 onLoad/onShow，组件用 Vue 的 mounted 等；H5 还要考虑浏览器路由。

onLoad、onShow、onReady 的执行顺序和区别？

典型顺序（首次进入页面）：

onLoad → onShow → onReady

钩子	时机	适合做什么
onLoad	页面加载，只一次；可接收路由参数	接参、首次请求
onShow	每次页面显示（含从后台回前台、返回该页）	刷新数据、埋点
onReady	首次渲染完成	需 DOM / 查询节点的操作

再次进入（页面未销毁）：通常再走 onShow，不一定再 onLoad。

🎤 口述精简版

第一次进页：onLoad 接参，onShow 显示，onReady 渲染完。之后每次回来多半只走 onShow，所以刷新放 onShow，接参放 onLoad。

UniApp 分包优化的规则和优势？如何配置分包？

为什么分包

小程序主包有体积上限；分包把页面拆出去，先下载主包，进分包页再下载，加快启动。

配置（pages.json）

{
  "pages": [{ "path": "pages/index/index" }],
  "subPackages": [
    {
      "root": "pagesA",
      "pages": [{ "path": "list/list" }]
    }
  ],
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["pagesA"]
    }
  }
}

优势：减小主包、按需加载；可配合预下载优化体验。

🎤 口述精简版

分包把非首屏页面拆到子包，主包变小启动更快。在 pages.json 配 subPackages，需要时还能 preloadRule 预下载。

rpx、px、vw 的区别？移动端、小程序适配原理？

单位	相对谁	说明
px	物理/CSS 像素	固定，不同屏观感不一致
rpx	规定屏宽 = 750rpx	小程序/UniApp 运行时换算，写起来像设计稿
vw	视口宽度	100vw = 屏宽，标准 CSS

适配原理：按屏宽比例缩放。rpx 是平台约定好的换算；H5 也可用 rem/vw。

🎤 口述精简版

px 写死；rpx 按 750 设计稿宽度自动换算，小程序最常用；vw 是视口百分比。UniApp 里多端样式优先 rpx。

小程序权限拒绝（定位、相册）如何捕获异常、兼容处理？

1. 调用前可用 uni.getSetting 看是否已授权
2. 未授权走 uni.authorize 或直接调 API，在 fail 回调处理
3. 用户拒绝：提示为什么需要权限，引导 uni.openSetting 打开设置
4. 兼容：无权限时降级（手动选点、不展示附近等）

不要假设一定成功；所有敏感 API 都要写 fail / catch。

🎤 口述精简版

先查授权，调用走成功失败回调；拒绝就提示并引导去设置页，同时准备降级方案，别让页面直接挂。

UniApp 打包体积过大如何优化？

• 分包、独立分包，控制主包
• 去掉无用页面、组件、静态资源；图片压缩、转 CDN
• 按需引入 UI 库，避免全量
• 条件编译剔除其它端代码
• 检查重复依赖、过大 npm 包
• 开启压缩 / 生产构建分析

🎤 口述精简版

体积大就：分包减主包、资源压缩上 CDN、组件按需引入、条件编译砍无用代码，再用构建分析盯大块依赖。

UniApp 多端样式兼容常见问题及解决方案？

问题	处理
选择器限制（小程序）	少用复杂后代、通配；注意组件样式隔离
rpx / px 混用错乱	统一约定；边框 1px 等单独处理
flex / 定位表现差	条件编译补丁；避免冷门 CSS
安全区 / 刘海	env(safe-area-inset-*)、各端适配组件
富文本 / 滚动差异	用官方组件或各端条件编译

🎤 口述精简版

样式兼容核心是：避开小程序不支持的 CSS，单位统一，差异大的用条件编译，安全区单独适配。

UniApp 页面跳转、传参的坑及优化方案？

常见 API

uni.navigateTo / redirectTo / reLaunch / switchTab / navigateBack

坑与处理

坑	处理
switchTab 不能传 url 参数	用全局状态 / 缓存 / 事件总线
参数过长被截断	复杂数据放 storage / store，url 只传 id
页面栈上限（约 10 层）	适时 redirectTo / reLaunch
编码问题	encodeURIComponent / 对应解码
onLoad 拿不到	确认是 navigateTo 类跳转；tab 页逻辑不同
需要回传	eventChannel：打开页 getOpenerEventChannel()，被打开页在 success 里 eventChannel.emit

🎤 口述精简版

跳转要分清 navigate、redirect、switchTab。tab 页不能靠 url 传参；参数多就传 id，数据放 store。还要注意页面栈别堆太深。回传可用 eventChannel。