uniapp对应面试题

uniapp 面试题：基础概念

1. uniapp 是什么？
uniapp 是一个基于 Vue.js 的跨平台开发框架，支持编译到 iOS、Android、H5、小程序等多个平台。开发者只需编写一套代码，即可发布到多个平台。

2. uniapp 的核心优势
跨平台开发效率高，学习成本低（Vue.js 语法），生态丰富（插件市场、社区支持），性能接近原生（通过条件编译优化）。

3. uniapp 的编译原理
通过条件编译将代码转换为各平台原生代码，例如：

• 小程序端：编译为微信小程序代码（WXML/WXSS）
• H5 端：编译为 HTML5
• App 端：通过 Weex 或原生渲染引擎处理

uniapp 面试题：开发实践

1. 如何实现条件编译？
使用特殊注释或语法标记平台专属代码，例如：

// #ifdef H5  
console.log('仅 H5 平台生效');  
// #endif  

2. 如何处理多平台样式适配？

• 使用 rpx 单位适配小程序和 H5 的响应式布局。
• 通过条件编译为不同平台编写独立样式文件。

3. uniapp 的生命周期有哪些？

• 应用生命周期：onLaunch、onShow、onHide（类似小程序）。
• 页面生命周期：onLoad、onShow、onReady（与 Vue 的 created、mounted 结合使用）。

uniapp 面试题：性能优化

1. 如何减少包体积？

• 使用分包加载（subPackages 配置）。
• 静态资源压缩，非必要资源走 CDN。
• 按需引入 UI 组件库（如 uView）。

2. 列表渲染性能优化

• 使用 v-for 时添加 :key。
• 长列表用 scroll-view 或第三方虚拟列表组件。
• 避免在 v-for 中执行复杂计算。

3. 启动速度优化

• 减少首屏请求，预加载关键数据。
• 启用分包预下载（preloadRule）。
• 使用骨架屏减少白屏时间。

uniapp 面试题：原生交互

1. 如何调用原生功能？

• 使用 uni. 开头的 API（如 uni.getLocation）。
• 通过 uni.requireNativePlugin 调用原生插件。

2. 如何与原生 App 通信？

• H5 与 App：通过 uni.postMessage 和 uni.onMessage。
• 小程序与 App：使用 uni.$on 和 uni.$emit 事件总线。

3. 如何处理平台差异？

• 检查 uni.getSystemInfoSync().platform 动态判断平台。
• 封装通用工具函数，内部处理兼容逻辑。

uniapp 面试题：项目经验

1. 如何调试多端应用？

• H5：浏览器开发者工具。
• 小程序：各平台开发者工具（微信/支付宝等）。
• App：真机调试 + Android Studio/Xcode 日志。

2. 遇到过哪些跨平台兼容问题？

• 小程序 CSS 支持度较低（如 position: fixed 限制）。
• App 端部分 API 需权限配置（如摄像头）。
• H5 端路由与小程序路由差异。

3. 如何发布到不同平台？

• 小程序：通过 hbuilderx 生成发行包，上传至对应后台。
• App：生成 IPA/APK 文件，提交应用商店。
• H5：部署到 Web 服务器。

以上问题覆盖了 uniapp 的核心知识点，实际面试中可能会结合具体场景深入提问。建议结合项目经验准备案例回答。