HarmonyOS 电商项目最佳实践：完整源码 + 模块化 + MVVM 完整案例

JokerX
223 阅读7分钟

🛍️ 一个完全开源免费且持续迭代的 HarmonyOS 电商项目(持续更新维护 最近更新于 2026 年 2 月 18 日)

作为一名 HarmonyOS 开发爱好者，我在学习 ArkTS 与 ArkUI 的过程中，希望能沉淀一个完整的电商学习案例，于是有了「青商城 · HarmonyOS」。项目基于 ArkTS 与 ArkUI 构建，采用模块化架构与 MVVM 模式，覆盖用户认证、商品展示、购物车、下单支付、订单管理等核心流程，并在鸿蒙侧同步完成了多设备形态适配（手机 / 折叠屏 / 平板）。

目前核心交易流程已打通，更多页面与细节仍在持续补齐。希望这个项目能为 HarmonyOS 开发者提供一个完整、可运行、可参考的实践样例。

青商城系列项目凝聚了我一年多业余时间的全部心血，从代码实现到 UI 设计再到动画效果，都力求打造流畅生动的用户体验。希望能为开发者提供有价值的参考，同时我也提供了完整的接口文档，期待大家的建议与反馈，共同学习进步。

如果项目对你有帮助，请给个 Star 支持 ⭐ 这对我来说很重要，能给我带来长期更新维护的动力！

🌟 项目亮点

  • ArkTS + ArkUI：拥抱 HarmonyOS NEXT 的主流开发方式
  • 模块化架构：分层清晰，职责明确，易于扩展与维护
  • 核心电商流程：认证、商品、购物车、下单、支付、订单等核心流程打通
  • V2 状态管理：ObservedV2 / AppStorageV2 / PersistenceV2
  • 大屏适配：手机 / 折叠屏 / 平板统一适配
  • 主题与国际化：支持浅色 / 深色主题与中英文切换

📱 项目预览

💡 说明：由于功能模块较多，截图不下，这里仅展示部分界面。

Mobile 1.png

Mobile 2.png

Tablet 1.png

Tablet 2.png

Foldable 1.png

📍 项目地址

📚 相关文档

  • 青商城 API 接口文档：在线查看

    • 接口文档会随着项目开发进度同步更新，主要包含各接口的请求参数和返回数据示例

  • 脚手架文档：在线查看

    • 很多同学希望在青商城的基础上二次开发或基于相同技术栈快速启动业务，我额外准备了一个精简的 HarmonyOS 脚手架，并配套了详细文档方便学习。
    • 它只保留基础能力与示例路由，拉仓库即可运行并按需填充业务逻辑，也便于学习架构拆分与模块化落地；青商城的大部分基础能力与文档说明在此同样适用，便于快速上手项目。

  • IBest-UI-V2 组件库文档：在线查看

    • 组件库使用说明与参数配置，包含常用组件示例

  • IBest-ORM 数据库文档：在线查看

    • 本地数据库能力与实体定义说明，包含基础使用示例

🛠️ 技术选型

项目采用了当前 HarmonyOS 开发的主流技术栈：

类别技术选型说明
编程语言ArkTSHarmonyOS NEXT 主流语言
UI 框架ArkUI声明式 UI 框架
架构模式MVVMView + ViewModel 分离
状态管理V2（ObservedV2/AppStorageV2）新版状态管理能力
网络请求Axios网络客户端与拦截器封装
数据库IBest-ORM本地数据库能力
组件库IBest-UI-V2业务组件库与基础控件封装

🧩 架构设计

项目采用模块化架构，参考官方最佳实践，按业务域拆分 Feature，并以 Core 模块承载通用能力：

AppScope/               # 应用配置
entry/                  # 应用入口模块
core/                   # 核心模块
│   ├── base/           # 基类
│   ├── data/           # 数据层
│   ├── database/       # 数据库
│   ├── datastore/      # 数据存储
│   ├── designsystem/   # 设计系统
│   ├── ibestui/        # IBest UI 组件库
│   ├── model/          # 数据模型
│   ├── navigation/     # 导航
│   ├── network/        # 网络层
│   ├── result/         # 结果处理
│   ├── state/          # 全局状态
│   ├── ui/             # UI组件
│   └── util/           # 工具类
feature/                # 功能模块
│   ├── auth/           # 认证模块
│   ├── common/         # 公共模块
│   ├── cs/             # 客服模块
│   ├── feedback/       # 反馈模块
│   ├── goods/          # 商品模块
│   ├── launch/         # 启动模块
│   ├── main/           # 主模块
│   ├── market/         # 营销模块
│   ├── order/          # 订单模块
│   └── user/           # 用户模块

模块化的优势：

  • 🔧 职责分离：业务模块与基础能力解耦
  • 👥 并行开发：支持团队协作，提升开发效率
  • ⚡ 增量编译：显著提升构建速度，优化开发体验
  • 🧪 便于测试：模块化设计便于单元测试与功能验证

功能模块目录

注：文档更新可能略滞后于代码开发进度，最新状态请查看项目中的 README.md 文件。

状态说明：

  • 已完成 - 功能页面已完整实现并可以正常使用
  • 待完善 - 功能页面基本实现，但还需要进一步优化和完善
  • 待优化 - 功能页面已实现，但需要性能优化或体验优化
  • 仅页面 - 只完成了页面UI，功能逻辑尚未实现
  • 待开发 - 功能页面尚未开发，陆续实现中

  • 主模块 (main)

    • 首页 (home) 待完善
    • 分类 (category) 待完善
    • 购物车 (cart) 待完善
    • 我的 (me) 待完善

  • 认证模块 (auth)

    • 登录主页 (login) 待完善
    • 账号密码登录 (account-login) 已完成
    • 注册页面 (register) 仅页面
    • 找回密码 (reset-password) 仅页面
    • 短信登录 (sms-login) 仅页面

  • 用户体系模块 (user)

    • 个人中心 (profile) 仅页面
    • 收货地址列表 (address-list) 已完成
    • 收货地址详情 (address-detail) 已完成
    • 用户足迹 (footprint) 已完成

  • 订单模块 (order)

    • 订单列表 (list) 待完善
    • 确认订单 (confirm) 待完善
    • 订单详情 (detail) 待完善
    • 订单支付 (pay) 已完成
    • 退款申请 (refund) 已完成
    • 订单评价 (comment) 待完善
    • 订单物流 (logistics) 已完成

  • 商品模块 (goods)

    • 商品搜索 (search) 已完成
    • 商品详情 (detail) 待完善
    • 商品评价 (comment) 已完成
    • 商品分类页面 (category) 已完成

  • 营销模块 (market)

    • 优惠券管理 (coupon) 已完成

  • 客服模块 (cs)

    • 客服聊天 (chat) 待开发

  • 反馈模块 (feedback)

    • 反馈列表 (list) 待开发
    • 提交反馈 (submit) 待开发

  • 通用模块 (common)

    • 关于我们 (about) 待开发
    • WebView 页面 (web) 待开发
    • 应用设置 (settings) 待开发
    • 用户协议 (user-agreement) 待开发
    • 隐私政策 (privacy-policy) 待开发
    • 贡献者列表 (contributors) 待开发

  • 启动流程模块 (launch)

    • 启动页 (splash) 仅页面
    • 引导页 (guide) 仅页面

🚀 开发计划

这是一个纯粹由个人热情驱动的开源项目。作为一名全职开发者，我只能在工作之余的时间来维护它，每一行代码都凝聚着我下班后和周末的心血。尽管时间有限，我仍然希望通过这个项目创建一个完整的电商学习案例，它更适合作为学习参考而非商业应用，因为某些方面还未达到商业级水准。我的目标是为其他开发者提供一个学习现代 HarmonyOS 开发技术的实践平台。

由于时间和精力的限制，项目的更新节奏可能不会很快，但我会坚持长期投入，一步一步地完善每个功能模块。如果你有兴趣参与贡献，无论是代码、设计还是文档方面，都将非常欢迎！

🌟 鸿蒙版本（当前）

  • 技术栈：ArkTS + ArkUI + MVVM
  • 架构特点：模块化设计 + 原子化服务

📱 Android 版本（维护中）

🤝 参与贡献

欢迎所有对 HarmonyOS 开发感兴趣的朋友参与项目贡献！

  • 🐛 Bug 反馈：发现问题请提交 Issue
  • 💡 功能建议：有好的想法欢迎讨论
  • 🔧 代码贡献：提交 Pull Request 改进项目
  • 📖 文档完善：帮助改进项目文档

如果这个项目对你有帮助，请不要忘记给个 ⭐ Star 支持一下！这对我来说意义重大，也是我持续更新的动力源泉。

让我们一起在 HarmonyOS 开发的道路上不断学习、共同进步！

avatar
文章
阅读
粉丝