随着鸿蒙生态的持续发展，“一次开发，多端部署”的开发理念逐渐成为跨设备应用开发的主流。本文将基于鸿蒙5.0系统，结合运动记分器App的开发实践，从功能设计、分层架构实现、核心功能编码到应用上线，完整呈现一款多场景适配的运动记分工具开发全流程，同时融入源码解析与可视化设计思路。

一、应用概述：功能与核心价值

运动记分器是一款专注于球类运动的比分记录工具，支持篮球、足球、通用球类等多场景使用，核心功能包括：

• 多球类适配：篮球（支持队伍管理、队员计分）、足球（含休息时间设置）、通用球类（自定义记分规则）

• 核心工具：计时控制、比分加减、犯规统计、语音唤醒（“小记小记”语音计分）

• 数据管理：比赛记录保存、历史记录查询/删除、比分截图导出

• 个性化设置：比赛时长自定义、犯规次数限制、队伍名称/头像/口号配置

应用界面遵循鸿蒙UX设计规范，支持多设备自适应显示，兼顾手机、平板等终端使用场景，其核心价值在于解决传统记分工具操作繁琐、功能单一的痛点，为运动爱好者提供高效、便捷的数字化记分方案。

二、分层架构设计：遵循鸿蒙生态规范

基于华为鸿蒙官方推荐的分层架构设计理念，本应用采用产品定制层-基础特性层-公共能力层三级架构，确保模块高内聚、低耦合，支持灵活扩展与多端部署。

（一）架构整体设计

架构层级	核心职责	应用模块对应
产品定制层	面向用户交互，实现设备/场景个性化需求	首页、篮球记分页、足球记分页、其他球类记分页、历史记录页、设置页
基础特性层	封装独立业务逻辑与功能UI，为上层提供基础支持	游戏管理模块（GameManager）、队伍管理模块（TeamManager）、语音交互模块（XiaojiManager）
公共能力层	提供全局复用能力，包括工具类、UI组件、数据管理	路由工具（ZRouter）、资源管理（ResManager）、日期工具（DateUtil）、媒体工具（MadaTool）

（二）各层级实现细节

1. 公共能力层：复用性核心支撑

公共能力层作为应用的基础支撑，封装了全应用通用的工具类与组件，编译为HAR包供上层依赖，不允许反向依赖。核心模块包括：

• 路由管理：基于ZRouter实现页面跳转与参数传递，统一路由配置

  
  // 路由跳转示例（篮球记分页跳转设置页）
  ZRouter.getInstance().setPopListener(popData => {
    const model = popData.data as FanModel
    this.fanModel = model
    this.gameModel!.secondCount = this.fanModel.time * 60
    this.time = this.formatSeconds(this.gameModel!.secondCount)
  }).push(PageConst.SettingPage)
  

• 通用工具：日期格式化（DateUtil）、音频播放（AVPlayer封装）、震动工具（MadaTool）

• 公共UI组件：自定义按钮（MenuButton）、记分单元格（FootballGameCell）、翻页动画组件（PageTurningAnimationComponent）

2. 基础特性层：业务逻辑封装

基础特性层封装独立业务模块，支持按需加载，本应用核心业务模块包括：

• 数据模型：GameModel（比赛信息）、TeamModel（队伍信息）、FanModel（犯规/时长配置），采用@ObservedV2实现状态响应

  
  // 比赛模型核心定义
  export class GameModel {
    cTime: number = 0 // 创建时间戳
    type: RecordType = RecordType.FOOTBALL // 比赛类型
    secondCount: number = 90 * 60 // 比赛时长（秒）
    redGroup?: TeamModel // 红队信息
    blueGroup?: TeamModel // 蓝队信息
    // 数据赋值方法
    setDataModel(model: object): void {
      Object.keys(model).forEach(key => (this as object)[key] = model[key])
    }
  }
  

• 业务管理：GameManager（比赛记录增删查）、TeamManager（队伍数据管理），采用单例模式确保数据一致性

  
  // GameManager单例实现
  export class GameManager {
    private static instance: GameManager
    dataSource: GameModel[] = [] // 比赛记录数据源
    
    static getInstance(): GameManager {
      if (!GameManager.instance) {
        GameManager.instance = new GameManager()
      }
      return GameManager.instance
    }
  }
  

3. 产品定制层：用户交互入口

产品定制层作为应用入口，编译为Entry类型HAP，包含所有用户交互页面，核心页面包括：

• 首页（HomeComponent）：展示球类入口与历史记录快捷访问

• 专项记分页：篮球（BasketballScoreRecordPage）、足球（FootballScoreRecordPage）、其他球类（OtherBallScorePage）

• 辅助页面：队伍管理（AddTeamPage）、头像选择（SelectLogoPage）、意见反馈（IssueReportPage）

三、核心功能实现：关键代码与效果展示

（一）计时功能：精准控制比赛时长

计时功能支持自定义时长设置、暂停/继续、自动结束，核心代码如下：

// 计时启动
beginStart() {
  this.intervalId = setInterval(() => this.updateTime(), 1000);
}

// 时间更新逻辑
updateTime() {
  if (this.gameModel?.secondCount === 0) {
    this.clearInterval() // 时长为0时停止计时
    return
  }
  this.gameModel!.secondCount -= 1
  this.time = this.formatSeconds(this.gameModel!.secondCount) // 格式化时间显示
}

// 时间格式化（分:秒/时:分:秒）
formatSeconds(seconds: number): string {
  const hor = Math.floor(seconds / 3600)
  const mins = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0')
  const secs = (seconds % 60).toString().padStart(2, '0')
  return hor === 0 ? `${mins}:${secs}` : `${hor}:${mins}:${secs}`
}

效果展示：

（二）比分记录：支持多模式记分

1. 篮球专项记分（队员级计分）

// 篮球记分单元格渲染
Row({ space: 5 }) {
  BasketballGameCell({ model: this.gameModel!.redGroup, singleW: this.singleW })
  BasketballGameCell({ model: this.gameModel!.blueGroup, singleW: this.singleW })
}

效果展示：

2. 通用球类翻页记分

通过PageTurningAnimationComponent实现比分翻页动画效果，核心代码：

// 翻页记分组件使用
Row({ space: 8 }) {
  // 红队百位、十位、个位记分
  PageTurningAnimationComponent({ playCount: this.red_bai, isAdd: this.red_isAdd, singleW: this.singleW })
  PageTurningAnimationComponent({ playCount: this.red_shi, isAdd: this.red_isAdd, singleW: this.singleW })
  PageTurningAnimationComponent({ playCount: this.red_ge, isAdd: this.red_isAdd, singleW: this.singleW })
  Text(":")
    .fontSize(30)
    .fontColor(Color.White)
  // 蓝队记分（同上）
}

效果展示：

（三）语音唤醒：便捷记分交互

集成语音唤醒功能，通过“小记小记”触发语音指令，核心代码：

// 语音监听初始化（aboutToAppear生命周期）
XiaojiManager.getInstance().startXiaotianListen()
XiaojiManager.getInstance().getResultDone = (model) => {
  if (model.isRed) {
    this.red_allCount += model.score // 红队加分
    this.calculateCount(true)
  } else {
    this.blue_allCount += model.score // 蓝队加分
    this.calculateCount(false)
  }
}

效果展示：

（四）数据持久化：历史记录管理

通过GameManager管理比赛记录，支持保存、查询、删除操作：

// 保存比赛记录
saveGameRecord() {
  const game = new GameModel()
  game.cTime = Math.floor(new Date().getTime() / 1000)
  game.type = RecordType.OTHER
  game.redGroup = this.redTeamModel
  game.blueGroup = this.blueTeamModel
  GameManager.instance().add(game) // 加入数据源
}

// 历史记录删除（右滑删除）
itemEnd(index: number) {
  Button({ type: ButtonType.Circle }) {
    Image($r('app.media.shanchu'))
      .width(20)
      .height(20)
  }
  .backgroundColor(Color.Red)
  .onClick(() => {
    this.scoreVM.deleteWithIndex(index) // 移除指定索引记录
  })
}

效果展示：

四、上线流程：从开发到鸿蒙应用市场发布

（一）上线前准备

1. 开发者账号与资质

   • 注册华为开发者联盟账号（developer.huawei.com）

   • 完成企业/个人实名认证，申请应用发布权限

2. 应用打包配置

   • 编译产物配置：产品定制层编译为Entry-HAP，基础特性层按需编译为Feature-HAP，公共能力层编译为HAR

   • 权限声明：在module.json5中声明必要权限（如媒体存储、定位（天气功能）、麦克风（语音功能））

     
     "requestPermissions": [
       {
         "name": "ohos.permission.WRITE_MEDIA",
         "reason": "保存比分截图",
         "usedScene": { "when": "inuse" }
       },
       {
         "name": "ohos.permission.MICROPHONE",
         "reason": "语音记分",
         "usedScene": { "when": "inuse" }
       }
     ]
     

3. 测试验证

   • 多设备适配测试：验证手机、平板等设备的界面适配与功能可用性

   • 功能测试：覆盖计时、记分、语音、数据存储等核心场景

   • 性能测试：确保动画流畅、无内存泄漏、响应延迟≤300ms

（二）应用发布步骤

1. 创建应用上架工单

   • 登录华为开发者联盟，进入“应用市场”→“应用发布”→“创建应用”

   • 填写应用基本信息：应用名称、版本号、应用简介、关键词（如“运动记分”“记分器”“球类工具”）

2. 上传应用包

   • 上传编译生成的.app文件（包含Entry-HAP与依赖的Feature-HAP/HAR）

   • 选择适配设备类型（手机、平板等）

3. 填写应用详情

   • 上传应用截图：首页、核心功能页（至少3张，尺寸符合鸿蒙规范）

   • 编写应用描述：突出核心功能、适配场景、鸿蒙特性优势

   • 设置应用分类：工具→实用工具

4. 提交审核

   • 确认应用合规性：无侵权内容、权限使用合理、功能与描述一致

   • 提交审核，等待华为应用市场审核（通常1-3个工作日）

5. 审核通过与发布

   • 审核通过后，设置发布时间（立即发布/定时发布）

   • 应用上线后，可在华为应用市场搜索“运动记分器”下载使用

（三）上线后维护

• 监控应用数据：通过华为开发者联盟后台查看下载量、使用率、崩溃率

• 迭代更新：根据用户反馈优化功能（如新增球类支持、优化语音识别率）

• 适配鸿蒙新版本：跟进鸿蒙系统更新，确保应用兼容性

五、总结与扩展方向

本运动记分器App基于鸿蒙5.0分层架构设计，实现了多球类适配、便捷记分、数据管理等核心功能，充分发挥了鸿蒙“一次开发，多端部署”的优势。通过模块化封装，应用具备良好的可扩展性，后续可扩展方向包括：

1. 新增更多运动类型：羽毛球、乒乓球等小球类记分规则

2. 团队协作功能：支持多人实时同步比分

3. 数据统计分析：生成比赛得分趋势图、队员表现报告

4. 鸿蒙元服务：支持免安装快速启动核心记分功能

鸿蒙生态的持续发展为应用开发提供了更丰富的能力，开发者可基于分层架构设计理念，打造更多适配全场景的高质量应用，为用户提供更便捷的数字化体验。