📝往期推文全新看点（文中附带最新·鸿蒙全栈学习笔记）

概述

本文将介绍如何将“一次开发，多端部署”应用到音乐播放器的实际开发过程中。音乐播放器是现在较为流行的大众娱乐应用，本文用作示例的音乐应用主要展示播放页在手机、折叠屏、平板和2in1四种产品形态上的“一次开发，多端部署”，在保障基本用户体验的同时，根据不同产品形态特性，适配相应的浏览和交互功能。下文将以架构设计、UX设计和页面开发三个章节来介绍“一多”音乐播放器在开发过程中的最佳实践。

架构设计

HarmonyOS的分层架构主要包括三个层次：产品定制层、基础特性层和公共能力层，为开发者构建了一个清晰、高效、可扩展的设计架构。

UX设计

音乐应用以播放页为重点进行介绍。

页面开发

本章介绍音乐应用如何使用“一多”的布局能力，完成页面层级的一套页面、多端适配。下文将以音乐播放器的播放页为例，一一介绍具体实现方案，帮助开发者快速实现音乐应用的“一多”开发。

播放页

播放页是音乐应用最主要的功能页面，主要用于播放音乐。播放页最终在三种设备上的显示效果图如下：

示意图	sm	md	lg
效果图

播放页主要包含播控区域以及歌词区域，在sm断点下通过Tab组件或者Swiper组件切换播控区域以及歌词区域，在md以及lg断点下播控区域以及歌词区域左右两列展示。
sm断点下使用Stack组件是区域1显示在Swiper组件上，区域2、3、4作为沿垂直方向布局的Column组件的子组件，在区域3以及区域4之间使用Blank组件填充空白区域。
在md断点下播控区域与歌词区域通过GridRow组件GridCol组件实现，GridRow设置总栅格数为8，每个Gridcol分别占4个栅格。
在lg断点下GridRow设置总栅格数为12，播控区域占4个栅格，GridCol设置offset为1，歌词区域占6个栅格，设置offset为1。

区域编号	简介	实现方案
1	标题区	Row组件的justifyContent属性设置为FlexAlign.SpaceBetween实现均分能力
2	专辑封面	Image组件设置aspectRatio属性为1使图片宽高相等。
3	歌曲信息	Column组件沿垂直方向布局展示两行文本。
4	播控区域	使用 Slider组件实现进度条。
5	歌词区域	Canvas 结合动画实现歌词滚动效果。
6	桌面歌词按钮	Image组件显示歌词图片。

ITPub博客

鸿蒙开发5.0案例分析：一多开发实例（音乐）

📝往期推文全新看点（文中附带最新·鸿蒙全栈学习笔记）

🚩 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

🚩 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

🚩 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

🚩 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

🚩 记录一场鸿蒙开发岗位面试经历~

📃 持续更新中……

概述

架构设计

UX设计

页面开发

播放页

最新文章