微信小程序开发案例 | 音乐播放器小程序（上）

举报
TiAmoZhang 发表于 2025/10/31 14:34:40 2025/10/31
【摘要】 音乐播放器小程序

阶段案例-音乐播放器小程序

01、准备工作

1 导入代码包

为了节约时间，这里我们直接把完成的小程序空白模板代码包templateDemo复制一份并重命名为demo06_musicPlayer, 导入开发工具等待改造。

2 新增图片素材

在根目录中新建文件夹images然后在其内部分别创建文件夹cover和player，分别用于放置音乐海报图和播放器的皮肤素材（例如黑胶唱片、指针、播放/暂停按钮等）。

cover目录下的相关图片素材如下：

■ 图6-8  cover目录下的图片素材


player目录下的相关图片素材如下：

■ 图6-9  player目录下的图片素材


3 新增公共JS文件

在小程序项目的根目录下新建utils文件夹，并在其中新建tool.js文件，代码如下：

1. …待补充…
2. 
3. // 导出公共函数和数据
4. module.exports = {
5. …待补充…6. }
等需要使用时往里面追加公共函数和数据即可。

在index.js文件顶部声明对公共JS文件tool.js的引用，代码如下：

1.  // index.js
2.  // 导入公共函数和数据
3.  const tool = require('../../utils/tool')
4.  
5.  Page({…})
此时就已经做好了准备工作，最终目录结构如下图所示：

■ 图6-10  项目目录结构


02、视图设计

1 导航栏设计

在app.json文件中可以自由修改window属性来实现导航栏的颜色、文字显示。更新后的app.json文件window属性相关代码如下：

1. {
2. "pages":[…],
3. "window":{
4. "navigationBarBackgroundColor": "#fff",
5. "navigationBarTitleText": "音乐播放器",
6. "navigationBarTextStyle":"black"
7. },
8. …9. }
上述代码可以更改导航栏背景色为白色、字体为黑色，效果如图6-11所示。

■ 图6-11  自定义导航栏效果


2 首页设计

首页主要是一个垂直排列的布局：上方是标题面板，里面包含了歌曲和作者名称；中间是黑胶唱片与指针；下方是音乐播放进度条与控制按钮。页面设计图如下图所示。

■ 图6-12  首页设计图


计划使用组件如下：

● 整体容器与4个区域容器：<view>组件；

● 标题区域文本：<text>组件；

● 唱片区域图片：<image>组件；

● 进度条区域：

〇 左右时间文本：<text>或<view>组件；

〇 中间进度条：<slider>组件。

● 按钮区域按钮图标：<image>组件。

1)    整体容器设计

首先进行整体容器设计，index.wxml代码如下：

1. <!--index.wxml-->
2. <!-- 1整体容器 -->
3. <view class="container">
4. <!-- 2 标题区域 -->
5. <!-- 3 唱片区域 -->
6. <!-- 4 进度条区域 -->
7. <!-- 5 按钮区域 -->
8. </view>
为页面设置样式，index.wxss代码如下：
1. /**index.wxss**/
2. /* 1 整体容器 */
3. .container {
4. width: 100%;/* 宽度 */
5. height: 100vh;/* 高度 */
6. display: flex;/* flex弹性布局 */
7. flex-direction: column;/* 垂直布局 */
8. align-items: center;/* 水平方向居中 */
9. justify-content: space-evenly;/* 垂直方向每个元素间距相等 */
10. background-image: linear-gradient(to top, #30cfd0, #330867);/* 渐变背景色 */
11. color: white;/* 文字颜色 */12. }
此时整体容器的设计就完成了，显示效果如下图所示。

■ 图6-13  整体容器设计完成效果图


2)    顶部标题面板设计

现在进行顶部标题面板的设计，index.wxml代码如下：

1. <!--index.wxml-->
2. <!-- 1整体容器 -->
3. <view class="container">
4. <!-- 2 标题区域 -->
5. <view class="title">
6. <text>小夜曲（舒伯特）</text>
7. </view>
8. …
9. </view>
index.wxss样式代码如下
1. /* 2 标题区域 */
2. .title{
3. font-size: 40rpx; /* 字体大小 */4. }
此时顶部标题面板区域就完成了，效果如图6-14所示。

■ 图6-14  顶部标题面板效果图


注：由于当前还没有添加其它面板区域，标题区域显示有点靠下，等后续逐步添加以后就会自动置顶了。

3）唱片区域设计

唱片区域分成指针和唱片两部分，index.wxml代码更新如下：

1. <!--index.wxml-->
2. <!-- 1整体容器 -->
3. <view class="container">
4. …
5. <!-- 3 唱片区域 -->
6. <view class="playBox">
7. <!-- 3-1 指针 -->
8. <image class="needle needle-play" src="/images/player/needle.png" mode="widthFix"></image>
9. 
10. <!-- 3-2 唱片 -->
11. <view class="discBox">
12. <!-- 3-2-1 黑胶唱片边框 -->
13. <image class="disc-border" src="/images/player/disc.png"></image>
14. <!-- 3-2-2 唱片中间圆形海报 -->
15. <image class="disc-cover" src="/images/cover/night.jpg"></image>
16. </view>
17. </view>
18. …
19. </view>
需要设置样式将唱片边框和海报叠在一起，且指针也需要设计合适的位置。

先为唱片区域设置整体样式，index.wxss代码追加内容如下：

1. /* 3 唱片区域 */
2. .playBox {
3. width: 520rpx;/* 宽度 */
4. height: 700rpx;/* 高度 */
5. position: relative;/* 相对位置 */6. }
因其内部组件都需要互相层叠，所以需要将该区域设置为相对位置效果，让内部组件都相对于整体唱片区域进行定位。

然后进行指针位置的设置，指针有2种情况：播放时要向下划拨到唱片上，停止时要向上移开。index.wxss代码追加内容如下：

1. /* 3-1 指针 */
2. .needle{
3. width: 200rpx;/* 宽度 */
4. position: absolute;/* 绝对位置 */
5. z-index: 99;/* 层叠级别，数字越大越在上层 */
6. }
7. /* 3-1 （1）指针（播放时） */
8. .needle-play {
9. top: 0;/* 顶部距离 */
10. left: 220rpx;/* 左边距离 */
11. }
12. /* 3-1 （2）指针（停止播放时） */
13. .needle-stop {
14. transform: rotate(-25deg);/* 逆时针旋转25° */
15. top: -40rpx;/* 顶部距离 */
16. left: 260rpx;/* 左边距离 */17. }
当前页面显示的是音乐播放时的指针位置，也可以将指针样式needle-play暂时改成needle-stop就可以看到位置变化了。

最后进行唱片的样式设计。将唱片盒子设置为圆形且超出部分隐藏，然后将海报图叠加上去，最后再叠加黑胶边框。index.wxss代码追加内容如下：

1. /* 3-2 唱片 */
2. .discBox {
3. width: 520rpx;/* 宽度 */
4. height: 520rpx;/* 高度 */
5. overflow: hidden;/* 超出部分隐藏 */
6. background-color: rgba(250, 250, 250, 0.5);/* 背景颜色半透明 */
7. border-radius: 50%;/* 圆角边框 */
8. position: absolute;/* 绝对位置 */
9. left: 0;/* 左边距离 */
10. bottom: 0;/* 底部距离 */
11. }
12. /* 3-2-1 唱片黑胶边框 */
13. .disc-border {
14. width: 500rpx;/* 宽度 */
15. height: 500rpx;/* 高度 */
16. position: absolute;/* 绝对位置 */
17. left: 10rpx;/* 左边距离 */
18. bottom: 10rpx;/* 底部距离 */
19. z-index: 9;/* 层叠级别，数字越大越在上层 */
20. }
21. /* 3-2-2 唱片中间圆形海报 */
22. .disc-cover {
23. width: 350rpx;/* 宽度 */
24. height: 350rpx;/* 高度 */
25. border-radius: 50%;/* 圆角边框 */
26. position: absolute;/* 绝对位置 */
27. left: 85rpx;/* 左边距离 */
28. bottom: 85rpx;/* 底部距离 */
29. z-index: 0;/* 层叠级别，数字越大越在上层 */30. }
可以继续追加样式让音乐播放时唱片旋转起来。

index.wxss代码追加如下：

1. /* 3-3 （1）唱片旋转动画模型 */
2. @keyframes rotate-disc {
3. /* 最开始不旋转 */
4. 0% {transform: rotate(0deg);}
5. /* 时间进行到一半的时候顺时针转180° */
6. 50% {transform: rotate(180deg);}
7. /* 时间进行到最后的时候顺时针转360° */
8. 100% {transform: rotate(360deg);}
9. }
10. /* 3-3 (2) 动画设定 */
11. .disc-cover-animation {
12. /* 每20秒均速执行1次rotate-disk动画 */
13. animation: rotate-disc 20s infinite normal linear;14. }
假设当前音乐正在播放，只需要将第11行的disc-cover-animation样式名称追加到圆形海报图片组件的class属性里就可以看到动画效果了。

此时唱片区域就全部做好了，效果如图6-16所示

■ 图6-16  唱片区域设计完成图


其中图(a)是假设音乐正在播放时的动画效果；图(b)是音乐停止时的静态效果。

4）进度条区域设计

进度条区域水平排列，从左到右依次是：当前播放时间、进度条以及音乐总时长。

index.wxml代码更新如下：

1. <!--index.wxml-->
2. <!-- 1整体容器 -->
3. <view class="container">
4. …
5. <!-- 4 进度条区域 -->
6. <view class="progress">
7. <!-- 4-1 左侧当前播放时间 -->
8. <view>00:00</view>
9. <!-- 4-2 中间进度条 -->
10. <slider backgroundColor='#fff' min='0' max='320' value="0" block-size="12" activeColor="#fff"></slider>
11. <!-- 4-3 右边歌曲时长 -->
12. <view>05:20</view>
13. </view>
14. …
15. </view>
index.wxss代码更新如下：
1. /* 4 进度条区域 */
2. .progress {
3. width: 600rpx;/* 宽度 */
4. display: flex;/* flex弹性布局（默认水平方向布局） */
5. align-items: center;/* 垂直方向居中对齐 */
6. }
7. /* 4 进度条区域-中间进度条 */
8. slider {
9. width: 500rpx;/* 宽度 */10. }
此时进度条区域就设计完成了，效果图如图6-17所示。

■ 图6-17  进度条区域设计完成图


5）按钮区域设计

按钮区域水平排列，从左到右依次是：上一首按钮、播放/暂停按钮（二选一出现）、下一首按钮。index.wxml代码更新如下：

1. <!--index.wxml-->
2. <!-- 1整体容器 -->
3. <view class="container">
4. …
5. <!-- 5 按钮区域 -->
6. <view class="btnBox">
7. <!-- 5-1 上一首按钮 -->
8. <image class="smallBtn" src="/images/player/btn_prev.png"></image>
9. <!-- 5-2 (1) 播放按钮 -->
10. <image wx:if="{{!isPlaying}}" class="bigBtn" src="/images/player/btn_play.png"></image>
11. <!-- 5-2 (2) 暂停按钮 -->
12. <image wx:else class="bigBtn" src="/images/player/btn_pause.png"></image>
13. <!-- 5-3 下一首按钮 -->
14. <image class="smallBtn" src="/images/player/btn_next.png"></image>
15. </view>
16. </view>
需要注意的是，播放和暂停按钮不会同时出现，音乐播放时要显示暂停按钮，而音乐未播放时要显示播放按钮。因此这里使用了wx:if和wx:else属性组合，让它们每次都只能出现其中1个。第10行的wx:if属性判断参数是isPlaying，所以请在index.js的data属性中临时设置这个属性值为false。

index.js的data属性设置如下：

1. // index.js
2. Page({
3. /**
4. * 页面的初始数据
5. */
6. data: {
7. isPlaying: false, //当前是否在播放（默认否）
8. },
9. …10. })
开发者在设计阶段也可以手动修改isPlaying的初始值为true来查看按钮切换显示效果。

index.wxss代码更新如下：

1. /* 5 按钮区域 */
2. .btnBox {
3. display: flex;/* flex弹性布局（默认水平方向布局） */
4. align-items: center;/* 垂直方向居中对齐 */
5. }
6. /* 5-1 大按钮 */
7. .bigBtn {
8. width: 100rpx;/* 宽度 */
9. height: 100rpx;/* 高度 */
10. margin: 0 30rpx;/* 外边距：上下0，左右30rpx */
11. }
12. /* 5-2 小按钮 */
13. .smallBtn {
14. width: 70rpx;/* 宽度 */
15. height: 70rpx;/* 高度 */
16. margin: 0 30rpx;/* 外边距：上下0，左右30rpx */17. }
此时按钮区域就设计完成了，效果图如图6-18所示。

■ 图6-18  按钮区域设计完成图


此时视图设计就全部完成了，下一节将进行页面的逻辑实现。


【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
5G媒体 JavaScript 小程序
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入