UniApp 高频面试题💡 基础概念 1. UniApp 是什么？它的核心特点是什么？答： UniApp 是 DCl

💡 基础概念

1. UniApp 是什么？它的核心特点是什么？

答：
UniApp 是 DCloud 推出的跨端开发框架，支持一次开发，编译到 微信小程序、H5、App（iOS/Android）、百度/支付宝/抖音等多个小程序平台。

核心特点：
✅ 支持 Vue 语法，易上手
✅ 跨端兼容，一套代码多端运行
✅ 支持微信小程序 API，无需二次适配
✅ 内置丰富 UI 组件（如 uni-ui）

2. UniApp 支持哪些端？如何实现多端兼容？

答：
UniApp 支持 10+ 端，包括：

小程序端：微信、支付宝、百度、抖音、QQ
App 端：iOS / Android（支持 nvue 原生渲染）
Web 端：H5、快应用

多端兼容方式：

使用 platform 进行 条件编译
通过 uni.getSystemInfo() 获取平台信息
统一 API 调用，减少端差异

示例：

<view v-if="platform === 'mp-weixin'">我是微信小程序</view>
<view v-else-if="platform === 'h5'">我是 H5 页面</view>

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

答：

对比项	UniApp	原生小程序
语法	Vue 语法	WXML + JS
跨端支持	一套代码多端运行	仅支持单端
生态	可使用 Vue 生态、npm	依赖微信小程序生态
维护成本	低（统一维护）	高（不同平台代码独立）

4. UniApp 运行模式有哪些？

答：

H5 运行模式（npm run dev:h5）：适用于浏览器调试
小程序运行模式（npm run dev:mp-weixin）：适用于微信小程序
App 运行模式（npm run dev:app）：适用于 iOS/Android

5. UniApp 如何创建一个新项目？

答：使用 Vue CLI 创建：

npx degit dcloudio/uni-preset-vue my-uniapp
cd my-uniapp
npm install
npm run dev:h5

或者使用 HBuilderX（可视化创建）。

📌 项目实践

6. UniApp 目录结构及作用

答：

├── pages/           # 页面文件夹
│   ├── index/       # 首页
│   │   ├── index.vue
│   │   ├── index.js
├── components/      # 组件目录
├── static/          # 静态资源（图片等）
├── uni_modules/     # uni-ui 组件库
├── main.js         # 入口文件
├── App.vue         # 应用根组件
├── manifest.json   # 项目配置（如 AppID）
├── pages.json      # 页面配置（路由）
├── uni.scss        # 全局样式

7. UniApp 如何进行全局状态管理？

答： UniApp 可使用：

Vuex（Vue2 项目）
Pinia（Vue3 项目，推荐）

Pinia 示例（推荐）：

import { defineStore } from 'pinia';

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({ count: 0 }),
  actions: { increment() { this.count++ } }
});

在组件中使用：

<script setup>
import { useCounterStore } from '@/store/counter';
const counter = useCounterStore();
</script>

8. UniApp 如何发送 HTTP 请求？

答：使用 uni.request 或 axios：

uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success(res) { console.log(res.data); }
});

9. UniApp 如何实现页面跳转？

答：

uni.navigateTo({ url: '/pages/detail/detail' });  // 保留当前页面
uni.redirectTo({ url: '/pages/index/index' });    // 关闭当前页面
uni.switchTab({ url: '/pages/home/home' });       // 跳转到 tabBar
uni.reLaunch({ url: '/pages/login/login' });      // 关闭所有页面

10. UniApp 如何处理图片和静态资源？

答：

图片存放在 static/ 目录，使用 src="/static/logo.png" 引用

动态加载图片：

<image :src="imgUrl" mode="aspectFill"></image>

选择本地图片：

uni.chooseImage({
  success: res => console.log(res.tempFilePaths)
});

🚀 性能优化

11. 如何优化 UniApp 小程序的包体积？

答： ✅ 减少不必要的 npm 包
✅ 使用 subPackages 进行分包
✅ 使用 CDN 资源（H5）
✅ 开启代码压缩（webpack）

12. 如何提高 UniApp 渲染性能？

答： ✅ 减少 setData 次数（Vue 组件已优化）
✅ 使用 scroll-view 代替 list
✅ 懒加载图片（lazy-load）

🛠️ 底层原理

13. UniApp 的 `v-html` 为什么不能渲染视频？

答：

v-html 在小程序端受限制，无法直接解析 <video> 标签
解决方案：
- 使用 rich-text 组件
- 使用 wxParse 解析 HTML

14. UniApp 是如何实现跨端编译的？

答： UniApp 使用 统一 Vue 代码，然后通过 uni-app compiler 编译成不同端的代码：

H5 端：Vue + Webpack
小程序端：转换成小程序原生代码
App 端：使用 Weex 或 nvue 进行原生渲染

15. UniApp 的 `nvue` 是什么？和普通 `Vue` 组件的区别？

答：

nvue 是 原生渲染模式，性能比 webview 更高
区别：
对比项 nvue 普通 vue
渲染方式 原生渲染 WebView 渲染
性能更流畅较慢
CSS 支持 仅 flex 完整 CSS

对比项	`nvue`	普通 `vue`
渲染方式	原生渲染	WebView 渲染
性能	更流畅	较慢
CSS 支持	仅 `flex`	完整 CSS

UniApp 高频面试题