- 简介
- 项目结构
- 核心组件
- 架构总览
- 详细组件分析
- 依赖关系分析
- 性能考虑
- 故障排查指南
- 结论
- 附录
本文件面向基于 Vue3 + UniApp + uView UI 的电商小程序实现方案，结合仓库中的现有资料，系统化梳理业务架构、商品管理、订单处理、支付流程等核心功能模块，并给出用户系统、优惠券、评价系统、客服功能等业务组件的开发指南。同时，总结 uView UI 在电商场景下的特殊使用、页面跳转、数据缓存、图片处理等技术要点；说明与后端服务的接口对接、数据同步、状态管理等集成方式；并提供 H5 、微信小程序、支付宝小程序等多端开发、测试、发布的完整流程建议。
项目结构
- 项目包含多个模块与前端套件，其中与“商城”直接相关的是 yudao-ui-mall-uniapp 与 yudao-ui-admin-uniapp。
- yudao-ui-mall-uniapp 是面向用户的电商小程序前端，支持多端（微信小程序、H5 等），具备商品、订单、支付、会员、优惠券等能力。
- yudao-ui-admin-uniapp 是管理后台前端，用于商品、订单、营销等后台运营。
Mermaid Diagram Code:
graph TB
subgraph "前端套件"
Mall["yudao-ui-mall-uniapp<br/>电商小程序前端"]
Admin["yudao-ui-admin-uniapp<br/>管理后台前端"]
end
subgraph "文档与设计"
Nav["系统首页导航"]
InterGuide["规则引擎业务系统交互指南"]
end
subgraph "后端模块"
Gateway["网关"]
ModuleSystem["系统模块"]
ModuleInfra["基础设施模块"]
ModuleBpm["工作流模块"]
ModuleDevice["设备模块"]
ModuleLauncher["启动器模块"]
ModuleReport["报表模块"]
ModuleRule["规则引擎模块"]
ModuleTask["任务模块"]
ModuleBlacklist["黑名单模块"]
end
Mall --> Gateway
Admin --> Gateway
Mall --> ModuleSystem
Mall --> ModuleInfra
Mall --> ModuleBpm
Mall --> ModuleDevice
Mall --> ModuleLauncher
Mall --> ModuleReport
Mall --> ModuleRule
Mall --> ModuleTask
Mall --> ModuleBlacklist
Admin --> ModuleSystem
Admin --> ModuleInfra
Admin --> ModuleBpm
Admin --> ModuleDevice
Admin --> ModuleLauncher
Admin --> ModuleReport
Admin --> ModuleRule
Admin --> ModuleTask
Admin --> ModuleBlacklist
图表来源
章节来源
核心组件
- 商品管理：商品列表、详情、分类筛选、价格与库存、SKU 规格、评价展示。
- 购物车：本地缓存、数量变更、选中状态、价格计算、下单前校验。
- 订单管理：下单、支付、发货、收货、售后、评价。
- 支付流程：统一下单、支付渠道选择（微信小程序）、支付回调、状态同步。
- 用户系统：登录授权、个人信息、收货地址、账户安全。
- 营销体系：优惠券、满减、限时折扣、积分抵扣。
- 评价系统：订单完成后评价、晒图、审核与展示。
- 客服功能：在线客服、工单、消息推送。
- 多端适配：H5、微信小程序、未来扩展支付宝小程序等。
章节来源
架构总览
下图展示了前端（商城与管理后台）与后端模块之间的关系，以及与规则引擎的集成方式。前端通过网关访问后端模块，业务系统交互通过 Vue3 组件（如 RuleBusinessTabs）进行集成。
Mermaid Diagram Code:
graph TB
Client["用户端<br/>H5/微信小程序/其他"] --> Mall["yudao-ui-mall-uniapp<br/>电商小程序前端"]
AdminClient["管理端<br/>H5/PC"] --> Admin["yudao-ui-admin-uniapp<br/>管理后台前端"]
Mall --> Gateway["网关"]
Admin --> Gateway
subgraph "后端模块"
Sys["系统模块"]
Infra["基础设施模块"]
Bpm["工作流模块"]
Device["设备模块"]
Launcher["启动器模块"]
Report["报表模块"]
Rule["规则引擎模块"]
Task["任务模块"]
Blacklist["黑名单模块"]
end
Gateway --> Sys
Gateway --> Infra
Gateway --> Bpm
Gateway --> Device
Gateway --> Launcher
Gateway --> Report
Gateway --> Rule
Gateway --> Task
Gateway --> Blacklist
Mall -. 集成 .-> RuleTabs["Vue3 规则引擎组件<br/>RuleBusinessTabs"]
图表来源
章节来源
详细组件分析
商品展示与详情
- 列表加载与分页：采用分页查询，支持分类筛选、排序与搜索。
- 详情页：SKU 选择、规格切换、价格与库存联动、收藏与分享。
- 图片处理：统一 CDN 地址、懒加载、缩略图与原图切换。
- 缓存策略：本地缓存近期浏览与热门商品，减少网络请求。
Mermaid Diagram Code:
flowchart TD
Start(["进入商品列表"]) --> LoadList["加载商品列表"]
LoadList --> Filter["分类/搜索/排序"]
Filter --> ToDetail["点击进入详情"]
ToDetail --> SKUSelect["SKU 规格选择"]
SKUSelect --> PriceStock["价格与库存联动"]
PriceStock --> AddCart["加入购物车"]
AddCart --> End(["完成"])
图表来源
章节来源
购物车
- 本地存储：使用本地缓存保存购物车数据，避免频繁请求。
- 数量与选中：支持增删改数量、全选/反选、小计与总价计算。
- 下单校验：校验库存、价格变动、优惠券可用性、收货地址有效性。
Mermaid Diagram Code:
flowchart TD
Enter(["进入购物车"]) --> LoadCart["从本地缓存加载"]
LoadCart --> EditQty["修改数量/删除"]
EditQty --> Select["勾选/取消勾选"]
Select --> Calc["计算小计与总计"]
Calc --> Check["下单前校验"]
Check --> |通过| GoPay["去支付"]
Check --> |不通过| Fix["修复问题"]
Fix --> EditQty
GoPay --> End(["完成"])
图表来源
章节来源
下单与支付流程
- 统一下单：提交收货地址、优惠券、备注等，生成订单号。
- 支付渠道：微信小程序支付通道，统一下单后调起支付。
- 支付回调：后端异步回调通知，前端轮询或接收推送更新状态。
- 状态同步：订单状态机驱动，从待支付到待发货/已完成/售后中。
Mermaid Diagram Code:
sequenceDiagram
participant U as "用户"
participant M as "商城前端"
participant G as "网关"
participant P as "支付模块"
U->>M : 选择商品/地址/优惠券
M->>G : 提交下单请求
G-->>M : 返回订单号
M->>P : 发起微信小程序支付
P-->>M : 支付结果
M->>G : 查询订单状态
G-->>M : 返回最新状态
M-->>U : 展示支付结果与后续流程
图表来源
章节来源
订单管理
- 订单状态：待付款、待发货、已发货、已完成、售后中。
- 用户操作：确认收货、申请售后、取消订单（未发货）。
- 后台协同：订单流转与工作流模块配合，确保合规与风控。
Mermaid Diagram Code:
stateDiagram-v2
[*] --> 待付款
待付款 --> 待发货 : "支付成功"
待付款 --> 已取消 : "超时/手动取消"
待发货 --> 已发货 : "商家发货"
已发货 --> 已完成 : "用户确认收货"
已发货 --> 售后中 : "申请售后"
售后中 --> 已完成 : "售后完成"
售后中 --> 已发货 : "退货重发"
图表来源
章节来源
用户系统
- 登录授权：支持微信小程序授权登录，绑定社交账号。
- 个人信息：头像、昵称、性别、手机号等维护。
- 收货地址：新增/编辑/删除/设默认，下单时选择。
Mermaid Diagram Code:
sequenceDiagram
participant U as "用户"
participant M as "商城前端"
participant S as "社交/认证模块"
U->>M : 打开小程序/网页
M->>S : 发起授权登录
S-->>M : 返回用户标识与授权信息
M-->>U : 进入首页/携带登录态
图表来源
章节来源
优惠券与营销
- 优惠券：领取、使用门槛、适用范围、有效期。
- 营销活动：满减、折扣、限时购、拼团、秒杀等。
- 积分：消费积分、抵扣规则、兑换礼品。
章节来源
评价系统
- 订单完成后可评价，支持文字与图片。
- 审核机制：后台审核后展示，保护消费者权益。
章节来源
客服功能
- 在线客服：消息发送、历史记录、自动回复。
- 工单系统：售后/退换货工单创建与跟踪。
章节来源
依赖关系分析
- 前端依赖：Vue3、UniApp、uView UI、Axios、Vuex/Pinia、路由与状态管理。
- 后端依赖：Spring Cloud Gateway、各业务模块（系统、基础设施、工作流、设备、启动器、报表、规则引擎、任务、黑名单）。
- 规则引擎：通过 Vue3 组件（如 RuleBusinessTabs）在前端集成业务规则。
Mermaid Diagram Code:
graph LR
Vue3["Vue3"] --> UniApp["UniApp"]
UniApp --> uView["uView UI"]
uView --> Axios["HTTP 请求"]
Vuex["状态管理"] --> Store["Pinia/Vuex Store"]
Router["路由"] --> Pages["页面/组件"]
Backend["后端模块"] --> Gateway["网关"]
Frontend["前端"] --> Gateway
图表来源
章节来源
性能考虑
- 图片优化：CDN 加速、懒加载、按需加载、尺寸裁剪。
- 缓存策略：本地缓存热门数据、接口缓存、合理过期时间。
- 分页与虚拟滚动：长列表使用分页或虚拟滚动提升渲染性能。
- 网络优化：合并请求、请求去重、失败重试与降级。
- 多端差异：针对不同端做差异化优化（如微信小程序的包体积与启动速度）。
故障排查指南
- 支付异常：检查支付渠道配置、回调地址、签名参数、订单状态一致性。
- 登录失败：检查社交授权配置、域名白名单、授权回调、Token 有效期。
- 订单状态不一致：检查异步回调、轮询策略、幂等处理。
- 页面跳转异常：检查路由配置、页面路径、参数传递、权限拦截。
- 图片加载失败：检查 CDN 配置、跨域设置、缩略图生成与缓存。
章节来源
本方案以 Vue3 + UniApp + uView UI 为基础，结合后端多模块与规则引擎，形成覆盖商品、订单、支付、用户、营销、评价与客服的完整电商能力矩阵。通过统一的网关与清晰的状态机，保障多端一致体验与业务稳定性。建议在开发过程中重点关注多端适配、性能优化与支付闭环，确保上线质量与用户体验。
多端开发、测试与发布流程
- 开发环境：安装 HBuilderX 或 VSCode + UniApp 插件，配置各平台开发者账号。
- 本地调试：分别在 H5 与微信小程序模拟器中调试，关注差异与兼容性。
- 测试验证：功能测试、兼容性 测试、性能压测、安全扫描。
- 构建打包：按平台生成对应包体，配置图标、启动图、分包策略。
- 发布流程：先小程序/公众号，再 H5；发布前进行灰度与回滚预案准备。
章节来源
uView UI 在电商场景下的特殊使用
- 表单与校验：统一表单组件与校验规则，提升下单与地址填写体验。
- 导航与布局：底部 Tab 与顶部导航适配移动端，保证触达率。
- 图片与弹窗：统一图片懒加载与错误占位，弹窗层级与交互一致性。
- 主题与样式：按品牌定制主题变量，保持视觉统一。
章节来源
与后端服务的接口对接与数据同步
- 接口规范：统一 RESTful 接口命名与返回格式，约定分 页、排序、过滤字段。
- 状态管理：使用 Pinia/Vuex 管理全局状态，避免重复请求与数据不一致。
- 数据同步：订单、支付、物流等关键数据采用轮询或推送，保证最终一致。
- 权限控制：前端路由守卫与按钮级权限，后端细粒度校验。
章节来源