一、项目概述

本项目基于 OpenHarmony 开发，作为第一个入手项目，参照黑马云音乐完成，图片素材来着网络，音频来自酷狗，实现一款具备基础音乐播放功能的应用，涵盖音乐文件管理、播放控制等模块，依托华为 AGC 云存储实现音频文件的云端存储与访问（链接若不能访问，可自行开通云存储）。

特别提示：可以先进行华为云的认证（免费限额，仅测试的话够用），下载DevEco Studio，具体看部署与运行。

二、项目结构

（一）目录结构及说明

该目录中只包含修改或者增加的目录

三、功能实现

（一）音乐播放流程

数据准备—>播放控制—>音频会话管理：如图所示。

​​​​手机界面显示效果如图展示。

 广告页效果展示（层叠样式布局）

进入大厅界面（搜索框布局，轮播图布局，横向滑动布局，层叠样式布局）

发现页面效果

播放页效果，图片尺寸原因，并非所有图片都为圆形

动态页效果，每个版本的轮播图

我的页面效果

（二）云存储

存储后获取下载链接粘贴到项目中的代码路径下即可，无需其它配置，（本文结合华为 AGC 云存）。储

（三）页面导航

页面路由：通过module.json5配置页面路由信息，定义各页面的路径和入口，在应用中使用鸿蒙的路由组件（如router模块 ）实现页面跳转，根据项目中的ets文件进行属性配置。

根据入口函数进行页面之间的跳转配置

@Builder
export function LayoutBuilder(){
  Layout()
}

src/main/module.json5

找到该属性，点击进行跳转

{
  "module": {
    "routerMap": "$profile:route_map",
  }
}

src/main/resources/base/profile/route_map.json

进入文件后，对需要进行跳转的ets文件进行属性配置

其中【

            name：ets文件名

            pageSourceFile：路径

            buildFunction：入口函数

         】

{
  "routerMap": [
    {
      "name": "Ad",
      "pageSourceFile": "src/main/ets/pages/Ad.ets",
      "buildFunction": "AdBuilder",
      "data": {
        "description" : "this is Ad"
      }
    },
    {
      "name": "Layout",
      "pageSourceFile": "src/main/ets/pages/Layout.ets",
      "buildFunction": "LayoutBuilder",
      "data": {
        "description" : "this is Layout"
      }
    },
    {
      "name": "Play",
      "pageSourceFile": "src/main/ets/pages/Play.ets",
      "buildFunction": "PlayBuilder",
      "data": {
        "description" : "this is Play"
      }
    }
  ]
}

交互逻辑：各页面内实现丰富交互，如Found.ets发现页点击推荐音乐可跳转到Play.ets播放并开始播放；Play.ets播放页的进度条拖动可调整音乐播放进度，与AVPlayerManager.ets交互更新实际播放状态。

四、部署运行

（一）环境准备

安装较为简单，只需要下载安装程序，SDK及环境变量都在软件内完成

1. 安装DevEco Studio，并配置 OpenHarmony 开发环境（安装对应 SDK、工具链 ）。
2. 云存储看需要进行替换或开通（本项目为华为云）

（二）运行步骤

模拟器安装需要开启Hyper-V以及Windows虚拟机监控程序平台，在控制面板—>程序—>启用或关闭Windows功能中进行勾选，然后重启生效

1. 在 DevEco Studio 中打开项目，等待项目同步完成（Hivigor 同步 ），确保依赖下载、配置生效。
2. 配置模拟器，在 DevEco Studio 中选择对应的设备作为运行目标。
3. 点击 “运行” 按钮，将应用安装到设备上，启动应用后，即可体验音乐播放、页面导航等功能，若涉及云存储音乐播放，需确保设备网络正常，能访问华为 AGC 云存储服务。

（三）特别说明

module.json5中还进行了权限声明

{
  "module": {
     "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET", // 核心网络权限（必须声明）
      },
      {
        "name": "ohos.permission.GET_NETWORK_INFO", // 可选：获取网络状态权限
      },
      {
        "name": "ohos.permission.KEEP_BACKGROUND_RUNNING"  // 后台运行权限
      },
    ]
  }
}

EntryAbility.ets进行创建和销毁资源

onWindowStageCreate(windowStage: window.WindowStage): void {
    // 准备播放器
    playerManager.init()
    sessionManager.init(this.context)
  }

onWindowStageDestroy(): void {
    // 注销会话
    sessionManager.destroy()
    playerManager.release()
  }

五、项目修改

（一）桌面图标

src/main/module.json5

四个属性依次为：桌面图标，名称，加载时资源，背景色

其中label修改value，其它为直接修改

{
  "module": {
    "abilities": [
      {
        "icon": "$media:logo",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:logo",
        "startWindowBackground": "$color:start_window_background",
      }
    ],
  }
}

{
  "name": "EntryAbility_label",
  "value": "原神云音乐"
}

（二）其它修改

项目有许多问题，只实现基本播放功能，可根据自己的喜好进行修改和优化

六、页面组件

（一）基本组件

Image 图片插入

Text 文字显示

Row 横向布局

Column 竖向布局

（一）其它组件

广告页

Stack组件实现跳过：默认5秒，5秒内手动点击跳过后会再次刷新（小bug）

推荐页

TextInput 文本输入组件（搜索框输入）

List 竖向可滑动组件（.listDirection(Axis.Horizontal)属性改为横向滑动）

Swiper 轮播图组件

另有文本显示行数及溢出显示样式（通过属性控制，不再列举）

Stack 重叠样式组件（通过属性设置位置）

发现页

点击事件通过onClick实现

动态页和我的页根据提供的数据由AI填充，不涉及逻辑交互，为纯页面布局，通过基础组件以及调整组件的属性就可以实现。