一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。
音乐小程序的设计
案例目的
(一) 掌握微信小程序中swiper组件、scroll-view组件、image组件、slider组件和include代码引用的使用。
(二) 掌握微信小程序中音频API的使用；
通过开发一个“音乐小程序”的案例来掌握相关组件和相关 API 的使用，参考界面如图所示。
在该小程序中可以完成如下功能：
(1)页面的播放列表、播放器、评论列表区域可以通过左右滑动实现显示，也可以通过单击相应的标签项进行显示。
(2)在“音乐推荐”区域实现轮播图、功能按钮和热门音乐的显示和播放。
(3)在页面的底部可以显示播放歌曲的信息、控制音乐的播放和暂停以及下一首的播放。
(4)在页面的“播放器区域”可以显示播放歌曲的信息，还可以通过滑块对音乐的播放进行控制。
(5)在页面的“播放列表区域”可以显示所有的相关歌曲，单击某一首歌可以进行播放。
注意： (1)根据自己的实际情况，本小程序中用到的图片和的音频数据可以存放在本地，也可以自己搭建本地服务器存储数据，通过wx.request()去获取数据。
(2)小程序的页面效果根据自己的喜好进行设置，下面的样式设置仅作为参考。
步骤1： 新建一个微信小程序项目，对项目文件中不需要的文件和代码进行删除。
步骤2： 在项目的pages/index/index.json文件中设置导航栏信息和样式。
{
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "音乐"
}
步骤3： 在项目的index文件夹下创建info.wxml(写上音乐推荐)、play.wxml(写上播放器)、playlist.wxml(写上播放列表)三个文件，该项目中的pages/index/index.wxml页面的内容有四个页面来构成，分别是index.wxml、info(音乐推荐区域)、、play.wxml(播放器区域)、playlist.wxml(播放列表区域)。
步骤4：
（1） 在项目的pages/index/index.wxml文件中编写如下代码。
<!-- 标签页标题 -->
<view class="tab">
<view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐</view>
<view class="tab-item {{tab==1?'active':''}}" bindtap="changeItem" data-item="1">播放器</view>
<view class="tab-item {{tab==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表</view>
</view>
<!-- 内容区域 -->
<view class="content">
<swiper current="{{item}}" bindchange="changeTab">
<swiper-item>
<!-- 音乐推荐页面 -->
<include src="info.wxml" />
</swiper-item>
<swiper-item>
<!-- 播放器页面 -->
<include src="play.wxml" />
</swiper-item>
<!-- 播放列表页面 -->
<swiper-item>
<include src="playlist.wxml" />
</swiper-item>
</swiper>
</view>
<!-- 底部播放器 -->
<view class="player">
底部播放器
</view>
(2) 在项目的pages/index/index.wxss文件中编写页面如下样式
/* 整体页面样式 */
page {
display: flex;
flex-direction: column;
background: #17181a;
color: #ccc;
height: 100%;
}
/* 标签项 */
.tab {
display: flex;
}
.tab-item {
flex: 1;
font-size: 10pt;
text-align: center;
line-height: 72rpx;
border-bottom: 6rpx solid #eee;
}
.active{
color: yellow;
border-bottom-color:red;
}
/* 内容区域 */
.content {
flex: 1;
}
.content>swiper{
height: 100%;
}
/* 底部播放器 */
.player{
background:#eee;
border-top: 1px solid #252525;
height: 112rpx;
color:#000;
}
(3) 实现标签页的切换，即“音乐推荐”、“播放器”和“播放列表”的切换效果。在项目的pages/index/index.js文件中编写页面如下代码：
data: {
item: 0, //swiper组件的current属性的默认值
tab: 0, //代表单击相应的标签，添加样式
},
//滑动页面，标签相应切换
changeItem: function(e) {
this.setData({
item: e.target.dataset.item,
tab: e.target.dataset.item
})
} ,
//标签切换，下面内容相应切换
changeTab: function(e) {
this.setData({
tab: e.detail.current
})
}
步骤5：实现音乐推荐区域。
(1) 在项目中添加一个images文件夹，将所需图片放进去。
(2) 在项目中添加一个audio文件夹，将准备的音乐放进去。
(3) 实现轮播图，在项目的pages/index/info.wxml文件中添加代码。
<scroll-view class="content-info" scroll-y>
<!-- 轮播图 -->
<swiper class="content-info-slide" autoplay circular indicator-dots indicator-active-color="yellow"
indicator-color="#fff">
<swiper-item>
<image src="../../images/flower1.jpg"></image>
</swiper-item>
<swiper-item>
<image src="../../images/flower2.jpg"></image>
</swiper-item>
<swiper-item>
<image src="../../images/flower3.jpg"></image>
</swiper-item>
<swiper-item>
<image src="../../images/flower4.jpg"></image>
</swiper-item>
<swiper-item>
<image src="../../images/flower5.jpg"></image>
</swiper-item>
</swiper>
</scroll-view>
(4) 在项目的pages/index/index.wxss文件中添加样式。
/* 音乐推荐 */
.content-info{
height: 100%;
}
/* 轮播图 */
.content-info-slide{
margin-bottom: 20rpx;
}
.content-info-slide image{
width: 100%;
height:100%;
}
(5) 实现功能按钮，在项目的pages/index/info.wxml文件的轮播图下添加代码。
<!-- 功能按钮 -->
<view class="content-info-portal">
<view>
<image src="../../images/04.png"></image>
<text>私人FM</text>
</view>
<view>
<image src="../../images/05.png"></image>
<text>每日歌曲推荐</text>
</view>
<view>
<image src="../../images/06.png"></image>
<text>云音乐新歌榜</text>
</view>
</view>
(6) 在项目的pages/index/index.wxss文件中添加样式。
/* 功能按钮 */
.content-info-portal{
display: flex;
margin-bottom: 15rpx;
}
.content-info-portal>view{
flex:1;
font-size:11pt;
text-align: center;
}
.content-info-portal image{
width: 100rpx;
height: 100rpx;
display: block;
margin:20rpx auto; /*图片居中显示 */
}
(7) 实现热门音乐，首先准备音乐数据，在项目的pages/index/index.js中的data中添加数组playlist来存放音乐数据。 (根据自己准备的音乐和图片进行设置)
playlist:[
{id:1,title:"触不可及",singer:"周深",src:"/audio/触不可及.mp3",coverImgUrl:"/images/zs1.jpg"},
{id:2,title:"大鱼",singer:"周深",src:"/audio/大鱼.mp3",coverImgUrl:"/images/zs2.jpg"},
{id:3,title:"归处",singer:"周深",src:"/audio/归处.mp3",coverImgUrl:"/images/zs3.jpg"},
{id:4,title:"画娟",singer:"周深",src:"/audio/画娟.mp3",coverImgUrl:"/images/zs4.jpg"},
{id:5,title:"蚕",singer:"周深",src:"/audio/蚕.mp3",coverImgUrl:"/images/zs5.jpg"},
{id:6,title:"卷珠帘",singer:"周深",src:"/audio/卷珠帘.mp3",coverImgUrl:"/images/zs6.jpg"},
{id:7,title:"爱上了",singer:"胡夏",src:"/audio/爱上了.mp3",coverImgUrl:"/images/hx1.jpg"},
{id:8,title:"晨昏",singer:"胡夏",src:"/audio/晨昏.mp3",coverImgUrl:"/images/hx2.jpg"},
{id:9,title:"给我快乐",singer:"胡夏",src:"/audio/给我快乐.mp3",coverImgUrl:"/images/hx3.jpg"},
{id:10,title:"何为永恒",singer:"胡夏",src:"/audio/何为永恒.mp3",coverImgUrl:"/images/hx4.jpg"},
{id:11,title:"放下",singer:"胡夏",src:"/audio/放下.mp3",coverImgUrl:"/images/hx5.jpg"},
{id:12,title:"破茧",singer:"张韶涵",src:"/audio/张韶涵 - 破茧.mp3",coverImgUrl:"/images/music1.png"}
],
(8) 在项目的pages/index/info.wxml文件的功能按钮下添加代码。 (将playlist中前面6首歌曲数据渲染到页面)，理解红色代码的含义。
<!-- 热门音乐 -->
<view class="content-info-list">
<view class="list-title">热门音乐</view>
<view class="list-inner">
<view **wx:if="{{index<6}}"** wx:for="{{playlist}}" wx:key="id" bindtap="change" data-index="{{index}}">
<image src="{{item.coverImgUrl}}"></image>
<text>{{item.title}}</text>
</view>
</view>
</view>
(9) 在项目的pages/index/index.wxss文件中添加代码。
/* 热门音乐 */
.content-info-list{
margin-bottom: 20rpx;
}
.content-info-list>.list-title{
margin:20rpx 35rpx;
}
.content-info-list>.list-inner{
display: flex;
flex-wrap: wrap;
}
.content-info-list>.list-inner>view{
flex:1;
text-align: center;
margin-bottom: 20rpx;
}
.content-info-list>.list-inner>view>image{
display: block;
width: 200rpx;
height:200rpx;
margin:0 auto;
border:1px solid #fff;
border-radius: 20rpx;
margin-bottom: 8rpx;
}
::-webkit-scrollbar{ /*隐藏滚动条*/
width:0;
height:0;
color:transparent;
}
运行小程序效果如图所示:
尾言
这是音乐小程序的前半部分，如果觉得还不错的话，欢迎点赞收藏哦。
