一、基础概念1. UniApp 是什么和 Vue/小程序有何区别答案UniApp 是基于 Vue.js 的跨平台框架一套代码可编译到 iOS、Android、H5、小程序等平台。与 Vue 区别UniApp 使用 Vue 的语法但组件和 API 更接近小程序如view替代div。与小程序区别UniApp 支持多平台编译而小程序只能运行在微信环境。2. UniApp 的优缺点优点跨平台一次开发多端发布。学习成本低Vue 语法 小程序组件对前端友好。性能较好通过原生渲染接近原生 App 体验。缺点生态限制部分原生功能需依赖插件或条件编译。调试复杂不同平台需单独适配。二、核心机制3. UniApp 的生命周期有哪些应用生命周期在App.vue中监听onLaunch应用初始化只触发一次。onShow应用显示如从后台切换到前台。onHide应用隐藏如切换到后台。页面生命周期在页面中监听onLoad页面加载接收路由参数。onShow页面显示。onReady页面初次渲染完成。组件生命周期与 Vue 一致created、mounted等。4. UniApp 的跨平台原理核心将 Vue 模板编译为各平台原生组件如微信小程序的 WXML。条件编译通过#ifdef和#endif区分平台代码例如// 仅 H5 平台生效#ifdefH5console.log(这是 H5 平台);#endif三、开发技巧5. 如何实现页面跳转和传参跳转方式uni.navigateTo保留当前页跳转可返回。uni.redirectTo关闭当前页跳转。uni.switchTab跳转至 TabBar 页面。传参示例// 跳转传参uni.navigateTo({url:/pages/detail?id123});// 接收参数在目标页面的 onLoad 中onLoad(options){console.log(options.id);// 输出 123}6. 如何处理网络请求和跨域请求方法使用uni.request支持 Promise 封装uni.request({url:https://api.example.com/data,success:(res){console.log(res.data);}});跨域解决开发阶段配置vue.config.js代理。生产环境服务端配置 CORS 或使用云函数。四、数据管理7. 如何实现数据缓存同步存储uni.setStorageSync(key,value);// 存constvalueuni.getStorageSync(key);// 取异步存储uni.setStorage({key:key,data:value});// 存uni.getStorage({key:key,success:(res){}});// 取8. 如何使用 Vuex 管理全局状态步骤安装 Vuex创建store目录。定义状态和 mutationsconststorenewVuex.Store({state:{count:0},mutations:{increment(state){state.count}}});在组件中调用this.$store.commit(increment);console.log(this.$store.state.count);五、性能优化9. 如何优化 UniApp 应用的性能减少渲染压力使用v-if替代v-show控制显隐。列表渲染时添加唯一key。资源优化图片懒加载使用uni-lazy-load组件。代码分包减少主包体积加快加载速度。缓存策略频繁访问的数据使用本地缓存如uni.setStorageSync。六、高频进阶问题10. 如何处理不同平台的样式差异使用upx/rpx单位根据屏幕宽度自适应750rpx 屏幕宽度。条件编译样式/* 仅在小程序生效 */#ifdef MP-WEIXIN .header{color:red;}#endif11. 如何调用原生功能如摄像头使用 UniApp API// 调用摄像头uni.chooseImage({success:(res){console.log(res.tempFilePaths);}});原生插件通过插件市场集成如支付、地图。总结以上问题覆盖了 UniApp 的核心知识点建议结合官方文档和实际项目加深理解。如需更完整题目可参考CSDN-UniApp面试题 或 掘金-UniApp面试题汇总。