企业官网建设流程全解析

一、为什么企业项目都开始采用 HarmonyOS？

HarmonyOS 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 ↓ Server

Repository 示例：

GoodsRepository ├── getGoods() ├── getDetail() ├── search() ├── category() ├── banner() └── recommend()

以后切 GraphQL：

Repository ↓ REST ↓ GraphQL

UI 不需要修改。

四、首页开发

首页一般包括：

Banner 分类 活动 秒杀 推荐 猜你喜欢 广告 直播入口

ArkUI：

Scroll Column LazyForEach Grid Swiper Tabs

布局：

Scroll │ ├── Banner ├── Category ├── Activity ├── FlashSale ├── Recommend └── Footer

推荐全部使用：

LazyForEach

不要：

ForEach

因为：

LazyForEach 支持 懒加载 分页 虚拟列表

五、商品列表

数据：

GET /api/goods

返回：

page size list total

Repository：

GoodsRepository.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 ↓ 播放器 ↓ 观众

HarmonyOS：

Camera ↓ 编码 ↓ 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

敏感数据：

KeyStore

Token：

自动刷新

支付：

服务器验证

文件：

签名URL

二十一、企业级日志体系

统一日志模块：

Logger ├── Debug ├── Info ├── Warn ├── Error └── Crash

结合埋点平台记录：

• 页面访问
• 接口耗时
• 用户行为
• 崩溃日志
• 性能指标（FPS、内存、启动时间）

生产环境建议支持日志分级、日志脱敏、远程上传与离线缓存。

二十二、企业级模块化设计

随着业务增长，推荐采用 Feature Module 拆分：

App │ ├── common ├── network ├── account ├── mall ├── order ├── payment ├── im ├── live ├── profile └── settings

各模块仅通过接口通信，公共能力沉淀到common，降低耦合，提高团队协作效率。

二十三、持续集成与发布

企业项目建议建立完整 CI/CD：

Git ↓ Code Review ↓ 自动构建 ↓ 自动测试 ↓ 静态扫描 ↓ 签名 ↓ 制品管理 ↓ 自动发布

同时引入：

• 单元测试
• UI 自动化测试
• 接口自动化测试
• 性能回归测试
• 灰度发布
• 崩溃监控
• 热修复（在平台能力允许范围内）