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

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

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

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

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

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

✒️ 持续更新中……

概述

本文将介绍如何将“一次开发，多端部署”应用到音乐播放器的实际开发过程中。音乐播放器是现在较为流行的大众娱乐应用，本文用作示例的音乐应用主要展示播放页在手机、折叠屏、平板和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。