跳到主要内容

前端架构概览

技术栈​

技术说明
Vue 3渐进式 JavaScript 框架，使用 Composition API
uni-app (Nuxt3)跨平台应用开发框架，一套代码编译到多端
TypeScript强类型 JavaScript 超集
PiniaVue 3 官方状态管理库
SCSSCSS 预处理器
UVUI (luch-request)uni-app UI 组件库与 HTTP 请求库

目标平台​

项目通过 uni-app 条件编译支持以下终端：

终端枚举值说明
微信小程序10通过 mp-weixin 条件编译
微信公众号11H5 在微信环境内运行
H5 网页20浏览器访问
手机 App31Android / iOS，通过 APP-PLUS 条件编译

终端枚举定义在 src/enums/index.ts 的 TerminalEnum，与后端 TerminalEnum 一一对应，用于请求头中标识请求来源。

项目目录结构​

live-mall-uniapp/
├── src/
│   ├── common/           # 公共模块
│   │   ├── http/         # HTTP 请求封装（拦截器、Token 刷新）
│   │   └── style/        # 全局公共样式（public.scss）
│   ├── components/       # 全局公共组件（c- 前缀）
│   ├── enums/            # 枚举常量定义
│   ├── hooks/            # 组合式函数（useIM、useCacheClean 等）
│   ├── libs/             # 第三方库封装
│   ├── pages/            # 页面（含分包子包）
│   ├── services/         # API 服务层
│   │   ├── apis/         # 接口调用函数
│   │   └── model/        # TypeScript 类型定义（.d.ts）
│   ├── static/           # 静态资源
│   ├── store/            # Pinia 状态管理
│   ├── types/            # 全局类型声明
│   └── utils/            # 工具函数
│       ├── index.ts      # 通用工具方法
│       ├── constants.ts  # 业务常量
│       ├── permission.ts # App 权限判断
│       └── permConsts.ts # 权限常量
├── manifest.json         # uni-app 应用配置
├── pages.json            # 页面路由与分包配置
└── vite.config.js        # Vite 构建配置

分包结构​

项目采用 uni-app 分包机制，主包仅包含 Tab 页面，业务页面按模块拆分到子包：

分包路径前缀功能
主包pages/首页、商城、直播、博物馆、我的
pkg-commonpages/pkg-common/登录、搜索等公共页
pkg-orderpages/pkg-order/订单相关页面
pkg-infopages/pkg-info/资讯详情
pkg-livepages/pkg-live/直播间页面

HTTP 请求层​

请求层基于 luch-request 封装，核心文件为 src/common/http/index.ts。

请求拦截​

// 自动添加 /app-api/ 前缀
if (!url.includes('/app-api/')) {
  config.url = '/app-api/' + url
}
// 自动注入 Authorization、terminal 请求头
config.header.Authorization = getAccessToken()
config.header.terminal = getTerminal()

响应拦截​

  • code = 0：业务成功，返回 data.data（或完整 data，取决于 custom.returnFullData）
  • code = 401：触发 Token 刷新流程，将并发请求加入队列等待
  • code ≠ 0：默认 Toast 提示错误信息，返回 Promise.reject

Token 自动刷新机制​

请求 A → 401 → 标记 isRefreshToken = true
请求 B → 401 → 加入 requestList 队列
刷新成功 → 回放队列中所有请求 → isRefreshToken = false
刷新失败 → 清空队列 → 跳转登录页

请求方法导出​

export const get = (url, params, custom) => http.get(url, { params, custom })
export const post = (url, data, custom) => http.post(url, data, { custom })
export const put = (url, data, custom) => http.put(url, data, { custom })

API 服务层规范​

所有接口调用函数集中在 src/services/apis/ 目录，按业务模块拆分文件：

文件职责
user.ts用户信息、登录、Token 刷新
order.ts订单、售后、物流
pay.ts支付、钱包、充值
mall.ts商品、分类、评价
cart.ts购物车
live.ts直播相关
museum.ts博物馆
public.ts字典、文件上传等公共接口

类型定义统一放在 src/services/model/ 目录，使用 .d.ts 声明文件。

条件编译​

uni-app 通过注释标记实现条件编译，项目中常见的用法：

// #ifdef APP-PLUS
// 仅在 App 环境执行的代码（如原生权限判断）
// #endif

// #ifdef H5
// 仅在 H5 环境执行的代码（如开发环境代理前缀）
// #endif

// #ifdef APP-PLUS
if (uni.getSystemInfoSync().platform === 'ios') {
  isIosApp = true
}
// #endif

全局事件通信​

项目通过 uni.$emit / uni.$on 实现跨组件通信，事件枚举定义在 GlobalEventEnum：

事件触发场景
HOME_PAGE_ON_SHOW首页 onShow，通知子组件刷新
ORDER_LIST_REFRESH订单列表刷新
IM_MESSAGE_RECEIVEDIM 消息接收
REFRESH_ADDRESS_LIST地址列表刷新
RECHARGE_SUCCESS余额充值成功
LIVE_ROOM_SWITCH切换直播间

ǰ�˼ܹ�����

���ĵ����ڽ����У������ڴ���