uni-app 常见面试题

uni-app 相关

1. 什么是uni-app？

   • uni-app是一个基于Vue.js的跨平台开发框架，允许开发者编写一次代码，便能在多种平台上运行，包括iOS、Android、Web、以及微信、支付宝、百度、头条等小程序平台。

2. uni-app的特点有哪些？

   • 跨平台开发能力、基于Vue.js易上手、丰富的组件库、良好的性能优化、内置的可视化IDE支持（HBuilderX）、完善的文档和社区支持、支持云开发等。

3. uni-app与Vue.js和微信小程序的异同点？

   • uni-app吸收了Vue.js的开发模式和语法，但扩展了对小程序特性的支持，如页面生命周期、API接口等。与微信小程序相比，uni-app增加了跨平台能力，但可能在某些平台特定功能上有更多兼容性考量。

4. 如何在uni-app中配置tabBar？

   • 在uni-app项目的pages.json文件中配置tabBar，指定页面路径、图标、文字等属性，实现底部导航栏的效果。

5. 列举几个uni-app中的常用组件。

   • uni-app提供了丰富的组件，例如uni-button、uni-input、uni-image、uni-scroll-view、uni-list、uni-swiper等，覆盖了基本的UI需求。

6. uni-app中常用的指令语句有哪些？

   • uni-app支持Vue.js的指令，如v-if、v-for、v-bind、v-on等，用于条件渲染、列表渲染、属性绑定和事件处理等。

7. 描述uni-app应用的生命周期、页面的生命周期、组件的生命周期。

   • uni-app应用有全局的生命周期钩子，如onLaunch、onShow等；页面生命周期包括onLoad、onShow、onHide、onReady 等；组件生命周期则有created、mounted、updated等，分别对应不同的应用状态和页面/组件的加载、显示、更新等阶段。

8. 如何在uni-app中进行页面跳转？

   • 可以使用uni.navigateTo、uni.redirectTo、uni.switchTab、uni.reLaunch等API进行页面间的导航。

9. uni-app如何处理不同平台的差异化？

   • 通过条件编译（如<template lang="wxml">中的<!-- #ifdef H5 -->...<!-- #endif -->）和平台API判断（如uni.getSystemInfoSync().platform）来实现不同平台的适配和差异化功能。

10. onLoad和onShow的相同和不同之处？

    • 相同：都是页面生命周期。
    • 不同：
      • onLoad 主要用于初始化页面数据、执行一次性设置（如网络请求获取数据）、处理页面间传参等操作。因为只在加载时执行一次，所以适合放置需要初始化的代码。
      • onShow 适合处理页面显示时需要更新的数据或状态，比如刷新页面数据、恢复页面状态等。由于可能被多次触发，所以在onShow中进行数据更新时要考虑到是否需要每次都执行。

11. uni-app常见的性能优化手段？

    • 组件化与模块化：

      • 将复杂的页面拆分成可复用的组件，减少代码冗余，提高开发效率和运行效率。

    • 数据绑定优化：

      • 避免在模板中使用复杂的计算表达式，减少Vue的计算负担。
      • 使用计算属性(computed)而非methods来处理依赖数据的计算，因为computed具有缓存机制。

    • 事件处理优化：

      • 使用事件委托，减少事件监听器的数量。
      • 对高频触发事件（如scroll）使用防抖(debounce)或节流(throttle)函数，控制执行频率。

    • 图片与资源管理：

      • 图片采用懒加载，只在图片进入可视区域时加载。
      • 对图片和其他静态资源进行压缩，减少加载时间。

    • 分包加载：

      • 利用uni-app的分包能力，将应用拆分成多个子包，按需加载，减少首次启动加载时间。

    • 原生渲染(nvue)：

      • 对于性能要求高的页面，可以使用nvue编写，利用原生渲染能力提高性能，特别是在动画和复杂布局方面。

    • CSS动画：

      • 优先使用CSS动画替代JavaScript动画，减少主线程负担，提高动画流畅性。

    • 状态管理：

      • 使用Vuex进行全局状态管理，确保数据一致性的同时，也便于管理和优化数据流动。

    • 网络优化：

      • 合理安排网络请求，避免不必要的并发请求和重复请求。
      • 使用缓存策略，如本地存储(localStorage)来缓存数据，减少网络请求。

微信小程序相关

1. 微信小程序的生命周期有哪些？

• 应用生命周期：

  • onLaunch: 当小程序初始化完成时触发，全局只触发一次。适合进行全局的初始化设置，如登录认证、全局变量设置等。
  • onShow: 当小程序启动，或从后台进入前台显示时触发。可以在这里执行数据的重新获取、恢复界面状态等操作。
  • onHide: 当小程序从前台进入后台时触发。可以在此清理临时数据、暂停定时器等，以节省资源。
  • onError: 当小程序发生脚本错误，或者 api 调用失败时触发。可以捕获错误信息并进行处理。

• 页面生命周期：

  • onLoad: 页面加载时触发，一个页面只会被调用一次。可以通过 options 参数获取页面跳转时传递的参数，适合进行数据的初始化请求。
  • onShow: 页面显示/切入前台时触发。每次页面显示都会调用，可以在这里执行数据更新、恢复界面状态等。
  • onReady: 页面初次渲染完成时触发。一个页面只会调用一次，此时可以进行一些需要 DOM 完整渲染后的操作。
  • onHide: 页面隐藏/切后台时触发。当用户导航到其他页面或底部 tab 切换时调用，可以执行清理工作，比如暂停音乐播放、停止计时器等。

2. 微信小程序的分包加载机制是什么？为什么要使用分包？

• 微信小程序的分包加载机制是一种优化加载性能的技术手段，它允许开发者将小程序的代码和资源分成不同的子包。这些子包在构建时被打包独立，用户在使用小程序时，不是一次性下载整个小程序的所有代码和资源，而是首先下载一个包含了默认启动页面、TabBar页面以及公共资源的主包。当用户需要访问分包内的页面时，客户端才会按需下载对应的分包。

• 分包加载的核心特点包括：

  • 主包与分包：主包包含小程序启动时必须的页面和公共资源，保证了快速启动。分包则包含了特定功能或模块的页面和资源，按需加载。
  • 大小限制：单个分包的大小不能超过2MB，而整个小程序所有包的总大小限制通常是20MB（具体限制可能会随微信官方政策调整而变化）。
  • 独立分包：微信小程序还支持独立分包，这类分包可以独立于主包运行，有自己独立的入口，常用于功能较为独立、不常访问但又需要快速加载的场景。

• 为什么要使用分包：

  • 优化启动速度：通过仅加载启动时必要的最小化资源，可以显著减少用户等待时间，提升用户体验。
  • 按需加载：用户根据实际需要加载特定功能的代码和资源，避免了不必要的数据下载，节省流量，提升加载效率。
  • 灵活扩展：随着小程序功能的增加，通过分包可以更加灵活地组织和管理代码结构，便于维护和扩展。
  • 降低弃用率：对于广告点击等场景，快速的加载能有效降低用户在加载第一个页面前的流失率。

3. 优化首页加载策略有哪些？

• 异步加载和按需加载：
  • 仅加载首页立即需要的最小化资源，如基础框架、样式和少量数据。其他如图片、次要功能组件或数据可采用懒加载，即在用户滚动到可视区域或触发某些操作时再加载。
• 骨架屏（Skeleton Screen）：
  • 显示一个与最终界面布局相似的临时界面，通常包括空白的内容块和动画效果，给用户即时反馈，减少感知等待时间。
• 资源压缩和优化：
  • 对图片、CSS、JS等资源进行压缩，减小文件大小。图片可使用WebP格式，利用CDN加速资源加载。
• 分包加载：
  • 将小程序代码和资源拆分成多个包，首页及其核心功能打包为主包，其他模块作为分包按需加载。
• 代码精简：
  • 删除无用代码，减少冗余逻辑，优化setData调用，避免频繁的页面更新导致的渲染卡顿。
• 预加载：
  • 预先加载用户接下来可能访问的页面资源，如首页加载时预加载TabBar内的其他页面资源，提高页面切换速度。
• 合理使用缓存：
  • 利用本地缓存存储不经常变动的数据，减少重复网络请求。例如，用户信息、基础配置等。
• 请求合并：
  • 尽可能将多个API请求合并为一个或少数几个请求，减少网络往返次数。
• 服务器端渲染（SSR）：
  • 对于动态内容，考虑在服务器端预先渲染部分内容，减少客户端渲染负担。
• 性能监控与持续优化：
  • 使用微信开发者工具的性能监测功能，定期分析首页加载耗时，针对瓶颈进行调优。
• 减少首屏渲染阻塞：
  • 确保关键渲染路径上的资源优先加载，避免非必要脚本和样式阻塞渲染。