小程序面试问答(解决方案)

其实 uni-app 和 uni-ui 目前还没有 TS 官方支持，所以默认情况下组件是没有类型校验的，如果自己手写组件类型声明效率太低了。基于这个问题，我们团队做过一些充分的调研，uni-helper 虽然是非官方组织，但这个第三方组织是 uni-app 生态类型声明文件做的非常好，更新频率也非常及时。其实在我们开发的过程中遇到些小问题，我们在 github 仓库提的 issue 也有及时解决。最后，我们也保持关注官方文档和更新，确保项目的稳定性和兼容性。

再深入

❓ 问: 为什么项目中使用 uni-ui 而不选择 uview-ui。
🙋‍♂️ 答: 我们团队主要是考虑以下三点做出的选择：
1. uni-ui 是官方出品的组件库，有官方的技术支持和持续维护(最重要)。
2. uni-ui 比较相对精简，有利于减小项目体积。
3. uview-ui 暂不支持 Vue3 开发，稍微落后。

当然 uview-ui 组件库也不错，是目前 uni-app 插件市场下载量最高的第三方 Vue2 组件库，社区中也有热心的小伙伴为 uview-ui 做了 Vue3 版，但目前可能作者太忙了，处于没更新状态，不稳定，所以综合考虑，我们选择官方维护的 uni-ui。

参考链接

类似问题

如何在 uni-app 中引入和使用第三方组件库？

请介绍几个常用的 uni-app 组件库，以及它们的特点和使用场景？

组件库的 TS 类型怎么处理？

问：在 uni-app 中，如何进行全局状态管理？请介绍一下你对 Vuex 和 Pinia 的了解。

必答

（总）我们项目使用的是 Pinia 进行全局状态管理，Vuex 或 Pinia 都是官方提供的状态管理库。

（分）我先说一下我对 VueX 的了解： Vuex 采用单一状态树的概念，将全局状态集中管理，方便追踪状态变化。Vuex 主要包含以下几个核心概念：

State：用于存储全局状态。
Getter：用于从 State 中派生出一些状态，例如计算属性。
Mutation：用于同步修改 State，严格遵循单向数据流。
Action：用于异步操作，可以包含异步 API 请求、异步提交 Mutation 等。

我对 Pinia 的了解是 Pinia 可以理解为就是 Vuex5，是一个轻量级的、兼容 Vue 3 和 Vue 2 的状态管理库。Pinia 和 VueX 主要区别是废弃了经常被认为是极其冗余的 mutation，Pinia 主要包含以下几个核心概念：

Store：用于存储全局状态和处理状态变化的方法，类似于 Vuex 的 State、Getter 和 Action 的集合。
可以创建和使用多个 Store 实例，每个 Store 都有自己独立的状态和方法。

（总）所以我们项目最终选择的是 Pinia 进行全局状态管理。

加分

（总）其实我们的项目还配置了 pinia 的持久化存储方案。

（分）我们用到了 pinia-plugin-persistedstate 插件实现持久化，周下载量 61k，但是这个插件默认使用 localStorage 实现持久化，小程序端不兼容，所以必须修改一下配置，替换为 uni-app 支持多端的持久化 API，也就是 uni.setStorageSync() 和 uni.getStorageSync()。

（总）持久化存储配置完成后，就会自动将用户数据保存在客户端，即使用户关闭了小程序，数据依然可以保留。

配置参考

// stores/modules/member.ts
export const useMemberStore = defineStore(
  'member',
  () => {
    //…省略
  },
  {
    // 配置持久化
    persist: {
      // 调整为兼容多端的API
      storage: {
        setItem(key, value) {
          uni.setStorageSync(key, value) 
        },
        getItem(key) {
          return uni.getStorageSync(key) 
        },
      },
    },
  },
)

参考链接

类似问题

在 uni-app 中如何实现全局状态管理？

在 uni-app 中如何实现持久化存储？

问：uni-app 中的组件和 Vue.js 中的组件有什么区别？

必答

（总）uni-app 是基于 Vue.js 构建的跨平台开发框架，因此 uni-app 中的组件与 Vue.js 中的组件在很多方面是相似的。然而，由于 uni-app 需要支持多个平台，包括微信小程序、App 端和 H5 端，所以在某些方面会有一些差异。

（分）根据自身理解，选其中几点回答即可：

以下是 uni-app 中的组件与 Vue.js 中的组件的一些主要区别：

跨平台：Vue.js 主要用于开发网页应用，而 uni-app 可以让你用同一套代码开发微信小程序、App、H5 等多个平台的应用。
基础组件：uni-app 提供了一套与 Vue.js 不同的基础组件。这些组件是为了适应不同平台的 UI 要求而设计的，它们在微信小程序、App 端和 H5 端上有统一的表现。在使用这些组件时，需要注意它们在不同平台之间的差异，封装自定义组件的时候更推荐 <view>、<text> 等基础组件，而非 <div>、<span>。
生命周期：虽然 uni-app 和 Vue.js 的组件都有生命周期钩子，但是 uni-app 为了适应不同平台而引入了一些额外的生命周期钩子，例如 onLaunch、onShow 和 onHide。
样式差异：某些 CSS 选择器不受支持如 * 通配符选择器。此外，uni-app 支持一种叫做 rpx 的相对单位，它可以自动适应不同屏幕尺寸。
条件编译：由于 uni-app 支持多个平台，所以提供了条件编译功能。开发者可以通过条件编译在特定平台上使用平台特有的 API 或组件，从而实现平台相关的功能。

（总）总的来说，uni-app 和 Vue.js 的组件在很多方面是相似的，但是由于 uni-app 需要支持多个平台，所以在一些细节上会有所区别，平时开发时要注意平台相关的组件、生命周期、样式的差异。

加分

可以展开 uni-app 生命周期，分为三部分：

应用生命周期：与 小程序 应用的生命周期一致（onLaunch、onShow、onHide 等）
页面生命周期：与 小程序 页面的生命周期一致（onLoad、onUnload、onShow 等）
组件生命周期：与 Vue.js 组件的生命周期一致（mounted、created 等）

我们的购物车页面需要借助 onShow 生命周期钩子获取最新的购物车列表数据，因为在商品详情页中进行添加购物车操作。添加成功后，打开购物车页面应展示最新的购物车数据。因此，每次 购物车页面 onShow 时，都应获取最新的购物车列表数据。收货地址列表页同理。

深入

（总）小程序是一个独立的应用平台，有自己的一套生命周期，如 onLaunch、onShow、onHide，在 uni-app 项目还支持 Vue 的生命周期钩子。

（分）

onLaunch 生命周期钩子在 App.vue 根组件中就类似 created 或 mounted 钩子。
Vue.js 本身并没有提供 onShow 和 onHide 生命周期钩子，但是可以通过监听页面的 visibilitychange 事件来模拟实现这两个钩子。从而在一定程度上模拟 onShow 和 onHide 的行为。

（总）我们的 uni-app 项目主要是做小程序端，所以我们的页面组件优先使用小程序的生命周期钩子，也就是 onShow、onHide 这些，普通组件就用 Vue 生命周期钩子。

参考代码

mounted() {
  document.addEventListener('visibilitychange', this.handleVisibilityChange);
},
beforeDestroy() {
  document.removeEventListener('visibilitychange', this.handleVisibilityChange);
},
methods: {
  handleVisibilityChange() {
    if (document.hidden) {
      this.onHide();
    } else {
      this.onShow();
    }
  },
  onShow() {
    console.log('页面显示');
  },
  onHide() {
    console.log('页面隐藏');
  }
}

这样，当页面变为隐藏状态时，onHide 方法会被调用；当页面重新显示时，onShow 方法会被调用。

注意，在组件销毁时，要记得移除 visibilitychange 事件监听，以避免内存泄漏。

参考链接

类似问题

uni-app 与 Vue 区别？

在 uni-app 中实现自定义组件，有什么区别吗？

在 uni-app 中如何处理 CSS 样式的差异？

请介绍 uni-app 的生命周期函数，以及它们在不同平台下的差异。

谈谈 uni-app 组件的生命周期，以及它们与 Vue.js 组件生命周期的异同。

如何实现 uni-app 中的跨平台开发？请谈谈 uni-app 的条件编译。