HarmonyOS 网络仿真应用开发全流程

NetLab 是我开发的 HarmonyOS 网络仿真实验应用，已上架华为应用市场。本文复盘从需求分析到上架的完整开发流程，分享 ArkTS + ArkUI 实战经验，希望对鸿蒙开发者有所启发。

一、项目背景与需求

作为高校信息技术教师，我发现学生网络实验课面临痛点：物理设备昂贵且数量不足，一台华为 S5700 交换机数千元，学校实验室难以人手一台。于是萌生开发移动端网络仿真工具的想法——让学生在手机/平板上就能练习网络配置。

需求核心：零硬件成本 + 移动端便携 + 真实设备体验 + 覆盖教学实验场景

二、技术选型：ArkTS + ArkUI

选择 HarmonyOS 原因：① 华为生态布道师，技术栈熟悉 ② 鸿蒙设备增长快，市场机会好 ③ ArkUI 声明式 UI 开发效率高。

模块	技术方案	选型理由
UI 框架	ArkUI（声明式）	组件化、状态驱动，开发效率高
开发语言	ArkTS	TypeScript 超集，类型安全
网络仿真引擎	纯前端 JS 实现	零后端依赖，离线可用
CLI 交互	Web 组件 + JS	复用成熟终端组件
内购支付	IAP Kit	华为官方支付，安全可靠

三、核心架构设计

应用采用 ArkUI 原生层 + Web 前端层 混合架构：

NetLab 应用架构:

┌─────────────────────────────────┐
│         ArkUI 原生层             │
│  (导航/实验列表/设置/IAP)        │
├─────────────────────────────────┤
│         Web 组件层               │
│  ┌───────────┐ ┌─────────────┐ │
│  │ 拓扑画布   │ │ CLI 终端    │ │
│  │ (Canvas)  │ │ (Terminal)  │ │
│  └───────────┘ └─────────────┘ │
│  ┌───────────────────────────┐ │
│  │   网络仿真引擎 (JS)        │ │
│  │   设备模型/路由计算/ping   │ │
│  └───────────────────────────┘ │
├─────────────────────────────────┤
│      rawfile 资源 + 本地存储     │
└─────────────────────────────────┘

💡

为何用 Web 组件？ 网络拓扑画布需要 Canvas 绘图 + 拖拽交互，Web 端有成熟方案（如 jsPlumb），用 ArkUI 的 Web 组件嵌入可复用前端生态，降低开发成本。

四、网络仿真引擎实现

仿真引擎是核心，用纯 JS 实现，模拟设备行为和网络协议：

设备模型：交换机（MAC学习+VLAN）、路由器（路由表+转发）、防火墙（安全域+策略）、PC（ARP+ICMP）
路由计算：根据路由表最长前缀匹配，决定数据包下一跳
ping/tracert 实现：模拟 ICMP Echo Request/Reply，按拓扑逐跳转发
VRP 命令解析：命令词法分析 + 语义执行，映射到设备模型操作

五、VRP 命令行解析

CLI 是网络实验的灵魂。实现要点：

// 命令注册示例（简化）
const commands = {
  'system-view': () => enterSystemView(),
  'vlan': (args) => createVlan(args[0]),
  'interface': (args) => enterInterface(args[0]),
  'ip address': (ip, mask) => configIp(ip, mask),
  'display vlan': () => showVlanTable(),
  'ping': (ip) => simulatePing(ip),
};

// 命令解析流程: 输入 → 词法分析 → 匹配命令 → 执行 → 输出
function parseCommand(input) {
  const tokens = input.trim().split(/\s+/);
  const cmd = matchCommand(tokens);
  return cmd ? cmd.execute(tokens) : 'Unknown command';
}

支持命令补全（Tab）、帮助（?）、历史记录（↑↓），贴合真实设备体验。

六、IAP 内购集成

商业模式：免费 + 付费解锁。VLAN 实验免费，进阶实验 ¥5 一次性解锁。

AGC 后台签署 IAP 协议、创建非消耗型商品（ID: unlock_all_experiments）
代码集成 IAP Kit，调用 purchase() 发起支付
支付成功后本地标记解锁状态，restorePurchase() 换设备恢复
商品随应用版本一起提交审核

⚠️

踩坑经验：debug 包环境下 IAP 无法跳转支付（环境限制非 bug），沙箱测试需手机号一致 + 等满10分钟。正式环境支付正常。

七、AGC 上架审核

上架流程：

签名配置：build-profile.json5 配置 Release 签名（首次因缺 Release 配置报错 993）
构建打包：DevEco Studio → Build → Generate Signed HAP
AGC 上传：AGC → 分发 → 应用市场 → 上传 .app 包
自检：AGC 自动检查包合规性，显示"已达标"
提交审核：填写版本特性描述 → 提交，1-3 工作日出结果

1.0.2 版本审核中，华为反馈深色模式需适配（告警），已用 $r('app.color.xxx') 资源引用 + @media (prefers-color-scheme: dark) 完成适配。

八、经验总结

混合架构务实：ArkUI 管原生交互，Web 组件管复杂画布，各取所长
仿真引擎是护城河：设备行为模拟的真实度决定应用价值
IAP 沙箱测试坑多：debug 环境限制多，建议直接等审核通过后正式环境验证
审核反馈要重视：华为审核质量高，深色模式等 UX 建议值得采纳
激励计划是动力：月活和评分达标有奖励，倒逼运营推广

NetLab 已上架华为应用市场，欢迎下载体验。后续将分享 IAP 集成细节、深色模式适配等专题文章。