我的IT日记

Appearance

UNI-SHOP 跨端电商小程序 ​

UNI-SHOP 项目截图占位

项目概览 ​

  • 项目类型：跨端电商小程序 / H5
  • 核心方向：商品浏览、购物车、订单交互、跨端复用
  • 负责角色：前端开发
  • 当前状态：内容可继续按真实项目细节补充

项目背景 ​

UNI-SHOP 是基于 Uni-app 构建的跨端电商解决方案，支持微信小程序与 H5。项目重点是商品浏览、搜索、购物车、订单交互和跨端复用。

技术栈 ​

  • Uni-app
  • Vue 3
  • Pinia
  • Alova
  • SCSS
  • pinia-plugin-persistedstate

我的职责 ​

  • 负责核心页面开发，包括商品列表、搜索、购物车和商品数量交互。
  • 引入 Alova 管理请求状态，统一处理 Loading、错误和数据缓存逻辑。
  • 基于 Pinia 设计购物车模块，并实现本地持久化。
  • 封装 TabBar 角标同步 Hook，保障购物车数量变化时多页面状态一致。
  • 封装 SearchBar 和商品列表组件，提高页面复用效率。

核心功能 ​

  • 商品浏览：支持首页推荐、分类列表和搜索结果展示。
  • 购物车：支持商品数量、选中状态、角标同步和本地持久化。
  • 订单交互：覆盖商品确认、数量调整和结算入口。
  • 跨端复用：同一套页面逻辑适配小程序与 H5 场景。

技术亮点 ​

请求层设计 ​

使用 Alova 的 useRequest Hook 管理请求生命周期，减少重复的 Loading 和错误处理代码，让页面更关注业务状态。

状态管理 ​

购物车使用 Pinia 管理，配合持久化插件保存本地状态，避免用户刷新或切换页面后购物车数据丢失。

组件封装 ​

SearchBar 和商品列表组件通过 props 与事件回调暴露稳定接口，在搜索页、首页和分类页复用。

难点与解决方案 ​

难点解决方案
小程序和 H5 状态表现不一致将购物车核心逻辑收敛到 Pinia store
重复请求状态代码过多使用 Alova Hook 统一管理请求生命周期
TabBar 角标需要实时同步封装数量同步 Hook，监听购物车状态变化
商品组件在多个页面复用拆分数据、样式和事件接口，减少页面耦合

项目截图 ​

后续替换为真实页面截图，建议包含首页、分类页、购物车页和订单确认页。

面试可讲点 ​

  • Alova 相比手写请求封装解决了什么问题。
  • 购物车持久化如何处理数据一致性。
  • Uni-app 跨端开发中需要注意哪些样式和生命周期差异。
  • 如何设计一个可复用但不过度抽象的业务组件。

后续优化 ​

  • 补充真实小程序截图和 H5 页面截图。
  • 补充请求层封装示例和购物车状态流转图。
  • 明确不同端的兼容处理点。