UniApp相关知识点整理

一、基础概念

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?id=123'});// 接收参数（在目标页面的 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');// 存constvalue=uni.getStorageSync('key');// 取

• 异步存储：

  uni.setStorage({key:'key',data:'value'});// 存uni.getStorage({key:'key',success:(res)=>{}});// 取

8. 如何使用 Vuex 管理全局状态？

• 步骤：
  1. 安装 Vuex，创建store目录。
  2. 定义状态和 mutations：

     conststore=newVuex.Store({state:{count:0},mutations:{increment(state){state.count++}}});

  3. 在组件中调用：

     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;}#endif

11. 如何调用原生功能（如摄像头）？

• 使用 UniApp API：

  // 调用摄像头uni.chooseImage({success:(res)=>{console.log(res.tempFilePaths);}});

• 原生插件：通过插件市场集成（如支付、地图）。

总结

以上问题覆盖了 UniApp 的核心知识点，建议结合官方文档和实际项目加深理解。如需更完整题目，可参考：CSDN-UniApp面试题 或 掘金-UniApp面试题汇总。