基于 Kotlin + Jetpack Compose 的完整电商购物应用实战
一个采用现代化 Android 技术栈开发的电商 App，涵盖完整的购物流程，从用户认证到支付结算，从商品浏览到订单管理。
一、项目概述
这是一个功能完善的 Android 电商购物应用，采用 Kotlin 语言开发，基于 MVVM 架构，使用 Jetpack Compose 构建 UI。项目采用模块化设计，代码结构清晰，适合作为电商类 App 的开发参考或学习案例。
技术亮点
| 技术领域 | 采用方案 |
|---|---|
| 编程语言 | Kotlin 2.2.10 |
| UI 框架 | Jetpack Compose + Material Design 3 |
| 架构模式 | MVVM + Repository 模式 |
| 网络请求 | Retrofit 3.0 + OkHttp 5.3 + Kotlin Serialization |
| 本地存储 | Room 2.8.4 + MMKV |
| 图片加载 | Coil |
| 异步处理 | Kotlin Coroutines |
| 依赖注入 | Hilt |
二、核心功能模块
2.1 用户认证系统
支持多种登录方式，满足不同用户需求：
- 密码登录：手机号 + 密码的传统登录方式
- 短信验证码登录：快速登录，无需记忆密码
- QQ 授权登录：集成第三方登录，一键授权
- 图片验证码：滑块拼图验证码，防止恶意注册
- Token 自动刷新：智能保持登录状态
2.2 首页功能
首页采用现代化的卡片式布局，信息层次清晰：
轮播图展示
- 自动轮播（3秒间隔）
- 支持点击跳转商品详情或活动页面
- 圆角图片显示，视觉更柔和
商品分类导航
- 10个主要分类：手机、服装、电脑、优惠、家电、户外、潮鞋、会员、包包、网络
- 点击可跳转到对应商品列表
限时抢购 & 热门推荐
- 横向滑动展示限时特价商品
- 纵向列表展示推荐商品，支持下拉刷新
2.3 商品分类
采用经典的左右分栏布局：
- 左侧：一级分类列表，点击切换高亮
- 右侧：对应分类下的二级分类详情
- 支持多级分类树结构展示
- 点击子分类可直接查看商品
2.4 商品详情
商品详情页信息丰富，交互流畅：
商品信息展示
- 商品主图轮播，支持手势缩放
- 商品标题、副标题、价格清晰展示
- 商品详情图片列表
规格选择
- 底部弹窗选择商品规格
- 不同规格对应不同价格
- 实时显示库存信息
操作按钮
- 加入购物车
- 立即购买
2.5 购物车功能
购物车采用 Room 数据库 本地存储，支持离线浏览：
核心功能
- 添加商品：从商品详情页加入购物车
- 选择商品：单选/全选商品
- 修改数量：增加/减少商品数量
- 删除商品：批量删除选中商品
编辑模式
- 切换编辑/结算模式
- 编辑模式下批量删除商品
- 结算模式下直接去结算
价格计算
- 实时计算选中商品总价
- 显示选中商品种类数量
2.6 订单管理
完整的订单生命周期管理，支持7种订单状态：
| 状态 | 说明 | 可操作 |
|---|---|---|
| 待付款 | 未支付订单 | 取消订单、立即支付 |
| 待发货 | 已支付待商家发货 | 申请退款 |
| 待收货 | 已发货待确认收货 | 查看物流、确认收货 |
| 待评价 | 已收货待评价 | 评价订单 |
| 售后/退款 | 退款中订单 | 查看进度 |
| 已完成 | 已完成订单 | 再次购买 |
| 全部订单 | 查看所有订单 | - |
2.7 支付系统
集成 支付宝 SDK，支持 App 支付：
- 支付结果回调处理
- 支付状态码解析：
9000：支付成功8000：支付结果确认中6001：用户取消支付
2.8 地址管理
完整的收货地址管理功能：
- 地址列表：显示所有收货地址，标记默认地址
- 添加地址：省市区三级联动选择
- 编辑地址：修改地址信息，切换默认地址
- 删除地址：删除收货地址
2.9 优惠券系统
完整的优惠券生命周期管理：
- 领取优惠券：首页领取优惠券、优惠券列表页领取
- 我的优惠券：查看已领取的优惠券，显示可用/已使用/已过期状态
- 使用优惠券：下单时选择优惠券，自动计算优惠金额
2.10 客服系统
集成在线客服功能：
- 创建客服会话
- 发送文字消息、图片消息
- 查看历史消息
- 消息列表显示未读消息数量
2.11 个性化设置
支持丰富的个性化配置：
主题设置
- 主题色自定义（支持多种主题色切换）
- 夜间模式/日间模式/跟随系统
语言设置
- 支持国际化，可切换语言
其他设置
- 清除缓存
- 隐私政策、用户协议
- 退出登录
三、技术架构
3.1 项目结构
项目采用 模块化架构，按功能模块划分： Shop/ ├── app/ # 主模块（Application 入口） ├── core/ # 核心模块（基础功能、网络、数据库、主题） ├── component/ # 公共组件模块（复用 UI 组件） └── feature/ # 功能模块 ├── home/ # 首页模块 ├── good/ # 商品模块 ├── order/ # 订单模块 ├── payment/ # 支付模块 ├── address/ # 地址模块 ├── search/ # 搜索模块 └── user/ # 用户模块
3.2 技术架构图
┌─────────────────────────────────────────────────────────────┐ │ UI Layer │ │ (Jetpack Compose + Material Design 3 + Custom Components) │ └─────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────┐ │ ViewModel Layer │ │ (StateFlow + UI State Management) │ └─────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────┐ │ Repository Layer │ │ (Remote DataSource + Local DataSource) │ └─────────────────────────────────────────────────────────────┘ │ ┌───────────────┴───────────────┐ ▼ ▼ ┌──────────────────────────┐ ┌──────────────────────────┐ │ Remote DataSource │ │ Local DataSource │ │ (Retrofit + OkHttp) │ │ (Room + MMKV) │ └──────────────────────────┘ └──────────────────────────┘
3.3 网络层设计
采用 Repository 模式，统一封装网络请求：
- Retrofit 3.0：类型安全的 HTTP 客户端
- OkHttp 5.3：高效的 HTTP 引擎
- Kotlin Serialization：原生 JSON 序列化
- Token 拦截器：自动处理 Token 刷新
- 网络状态监听：实时监测网络变化
3.4 本地存储
- Room 数据库：购物车数据持久化
- MMKV：轻量级键值存储，用于用户配置
四、UI/UX 设计亮点
4.1 骨架屏加载
在数据加载过程中显示骨架屏，提升 perceived performance：
4.2 空状态设计
针对各种空状态提供友好的提示：
- 空购物车
- 无网络连接
- 无搜索结果
- 无订单记录
【此处插入：空状态页面截图】
4.3 错误处理
完善的错误处理机制：
- 网络错误提示
- 服务器错误提示
- 操作成功/失败提示
五、开发环境
| 配置项 | 版本 |
|---|---|
| Android Studio | Ladybug 或更高版本 |
| Gradle | 8.0+ |
| minSdk | 24 |
| targetSdk | 35 |
| compileSdk | 35 |
| JDK | 17 |
六、总结
这个项目展示了一个完整电商 App 的开发实践，涵盖了：
✅ 完整的业务闭环：从浏览商品到下单支付，从订单管理到售后服务
✅ 现代化的技术栈：Kotlin + Compose + MVVM + Coroutines
✅ 模块化的架构设计：清晰的模块划分，易于维护和扩展
✅ 优秀的用户体验：骨架屏、空状态、错误处理、动画过渡
✅ 完善的工程实践：代码规范、版本管理、依赖管理
无论是作为学习案例还是项目参考，都具有较高的价值。希望这篇文章对你有所帮助！
参考资源
如果这篇文章对你有帮助，欢迎点赞、收藏、评论交流！有任何问题可以在评论区留言，我会及时回复。
