网站导航
> 技术文档 > 【代码+文档】基于 OpenHarmony 开发的鸿蒙云音乐项目

【代码+文档】基于 OpenHarmony 开发的鸿蒙云音乐项目

网友: 技术文档 2025-08-08 08:44:41

一、项目概述

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

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

二、项目结构

（一）目录结构及说明

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

三、功能实现

（一）音乐播放流程

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

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

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

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

发现页面效果

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

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

我的页面效果

（二）云存储

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

（三）页面导航

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

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

@Builderexport 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填充，不涉及逻辑交互，为纯页面布局，通过基础组件以及调整组件的属性就可以实现。

网络标签：

相关问题