---
url: https://www.lingpapl.cn/projects/uni-shop.md
description: 基于 Uni-app、Vue3、Pinia、Alova、SCSS 的跨端电商小程序项目复盘。
---

# UNI-SHOP 跨端电商小程序

![UNI-SHOP 项目截图占位](/images/project-placeholder.svg)

## 项目概览

* 项目类型：跨端电商小程序 / 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 页面截图。
* 补充请求层封装示例和购物车状态流转图。
* 明确不同端的兼容处理点。