《HarmonyOS 5 企业级开发实战（商城、IM、直播）》—— 从 0 到企业级商业应用

一、为什么企业项目都开始采用 HarmonyOSHarmonyOS NEXT 发布以后最大的变化不是 UI而是整个应用开发模式已经完全企业化。以前企业开发Activity Fragment XML现在全部变成Ability ArkUI ArkTS Atomic Service企业真正关心的是商城即时通讯(IM)直播支付推送地图文件OSS多端同步性能安全所以一个真正的企业级 HarmonyOS 项目大概长这样商城 App │ ├── 登录 ├── 首页 ├── 商品 ├── 分类 ├── 搜索 ├── 购物车 ├── 下单 ├── 支付 ├── IM客服 ├── 消息 ├── 我的 ├── 订单 ├── 收藏 ├── 设置 └── 直播带货整个项目通常40~120 个页面 200 Components 100 Services 100000 行代码二、企业项目整体架构推荐采用MVVM Repository Domain Router Service目录entry │ ├── pages │ ├── components │ ├── models │ ├── network │ ├── repository │ ├── services │ ├── stores │ ├── utils │ ├── router │ ├── constants │ ├── hooks │ ├── permission │ ├── common │ └── resources真正的大厂一般还会继续拆feature feature/home feature/mall feature/order feature/live feature/im feature/member每一个 Feature 独立维护。三、商城项目整体架构典型流程启动 ↓ Splash ↓ 登录 ↓ 首页 ↓ 商品列表 ↓ 商品详情 ↓ 加入购物车 ↓ 下单 ↓ 支付 ↓ 订单 ↓ 物流 ↓ 评价数据流UI ↓ ViewModel ↓ Repository ↓ Remote DataSource ↓ HTTP ↓ ServerRepository 示例GoodsRepository ├── getGoods() ├── getDetail() ├── search() ├── category() ├── banner() └── recommend()以后切 GraphQLRepository ↓ REST ↓ GraphQLUI 不需要修改。四、首页开发首页一般包括Banner 分类 活动 秒杀 推荐 猜你喜欢 广告 直播入口ArkUIScroll Column LazyForEach Grid Swiper Tabs布局Scroll │ ├── Banner ├── Category ├── Activity ├── FlashSale ├── Recommend └── Footer推荐全部使用LazyForEach不要ForEach因为LazyForEach 支持 懒加载 分页 虚拟列表五、商品列表数据GET /api/goods返回page size list totalRepositoryGoodsRepository.getList(page)页面GoodsPage ↓ load() ↓ Repository ↓ 更新状态 ↓ LazyForEach支持下拉刷新 上拉加载 分页 搜索 筛选 排序六、商品详情详情页面商品图 ↓ 轮播 ↓ SKU ↓ 库存 ↓ 价格 ↓ 详情HTML ↓ 评价 ↓ 推荐商品整个页面NestedScroll图片Image CachedNetworkImage详情Web Component 或者 RichText七、购物车模块核心CartStore维护Map goodsId ↓ CartItem支持数量 删除 全选 优惠券 失效商品状态Observed CartStore页面ObjectLink自动刷新。八、订单模块订单状态待付款 ↓ 待发货 ↓ 待收货 ↓ 已完成 ↓ 已评价状态机Pending ↓ Paid ↓ Shipping ↓ Finished订单页面Tabs ↓ 全部 待付款 待发货 待收货 完成九、支付模块支付流程创建订单 ↓ 获取支付参数 ↓ 拉起支付 ↓ 支付完成 ↓ 回调 ↓ 刷新订单支付建议不要相信客户端 客户端只负责 拉起支付 真正支付状态 服务器通知所以支付成功 ≠ 订单成功真正应该服务器 ↓ Notify ↓ 订单更新 ↓ 客户端刷新十、IM即时通讯系统架构企业 IM登录 ↓ WebSocket ↓ 心跳 ↓ 消息 ↓ ACK ↓ 重连模块Conversation Chat Contact Friend Group Setting十一、WebSocket 长连接连接App ↓ WebSocket ↓ Gateway ↓ IM Server收到Message ↓ Parser ↓ DB ↓ 通知UI消息模型Message id from to type content status time十二、消息发送流程输入 ↓ 发送 ↓ 本地插入 ↓ 发送服务器 ↓ ACK ↓ 成功失败status ↓ Sending ↓ Fail ↓ Retry所以消息永远先显示不要等服务器成功体验很差。十三、聊天页面优化消息LazyForEach头像缓存图片压缩 缩略图长列表分页 历史加载支持撤回 回复 引用 转发 多选 收藏十四、直播系统架构直播主播 ↓ RTMP ↓ 推流 ↓ CDN ↓ 播放器 ↓ 观众HarmonyOSCamera ↓ 编码 ↓ RTMP ↓ Server ↓ FLV ↓ Player十五、直播带货页面页面播放器 ↓ 商品 ↓ 评论 ↓ 礼物 ↓ 主播 ↓ 购物车布局Stack ↓ Player ↓ Float Panel浮层评论 礼物 商品 全部 Overlay十六、直播聊天室连接WebSocket消息弹幕 点赞 进入房间 送礼 关注全部消息队列统一消费。避免1000条消息 同时刷新UI建议100ms 批量刷新十七、图片上传流程PhotoPicker ↓ 压缩 ↓ OSS ↓ URL建议不要上传原图压缩80% WebP AVIF十八、OSS 上传架构推荐STS ↓ 获取Token ↓ 上传OSS不要AK/SK 放客户端十九、性能优化首页LazyForEach 缓存 分页图片缩略图 缓存 WebP列表虚拟列表网络HTTP2 KeepAlive Gzip数据库批量事务二十、安全设计登录JWT接口HTTPS敏感数据KeyStoreToken自动刷新支付服务器验证文件签名URL二十一、企业级日志体系统一日志模块Logger ├── Debug ├── Info ├── Warn ├── Error └── Crash结合埋点平台记录页面访问接口耗时用户行为崩溃日志性能指标FPS、内存、启动时间生产环境建议支持日志分级、日志脱敏、远程上传与离线缓存。二十二、企业级模块化设计随着业务增长推荐采用 Feature Module 拆分App │ ├── common ├── network ├── account ├── mall ├── order ├── payment ├── im ├── live ├── profile └── settings各模块仅通过接口通信公共能力沉淀到common降低耦合提高团队协作效率。二十三、持续集成与发布企业项目建议建立完整 CI/CDGit ↓ Code Review ↓ 自动构建 ↓ 自动测试 ↓ 静态扫描 ↓ 签名 ↓ 制品管理 ↓ 自动发布同时引入单元测试UI 自动化测试接口自动化测试性能回归测试灰度发布崩溃监控热修复在平台能力允许范围内