第3章音乐小程序项目【任务1】标签页切换【任务3】播放器开发前准备【任务2】音乐推荐【任务4】播放列表学习目标掌握swiper组件、scr
oll-view组件的使用掌握slider组件的使用掌握掌握image组件的使用掌握音频API的使用掌握1234掌握目录3.13.
43.33.2开发前的准备【任务3】播放器【任务2】音乐推荐?点击查看本节相关知识点【任务1】标签页切换?点击查看本节相关知识点?
点击查看本节相关知识点?点击查看本节相关知识点目录3.5【任务4】播放列表?点击查看本节相关知识点知识架构3.1开发前的准备1
项目展示2项目分析3项目初始化知识架构3.2【任务1】标签页切换1任务分析2前导知识3编写页面结构和样式4实现标签页切换知识架构
3.3【任务2】音乐推荐1任务分析2前导知识3内容区域滚动4轮播图5功能按钮6热门音乐知识架构3.4【任务3】播放器1任务分析
2前导知识3定义基础数据4实现音乐播放功能5编写播放器页面6控制播放进度知识架构3.5【任务4】播放器列表1任务分析2编写页面结
构和样式3实现换曲功能3.1开发前准备1项目展示音乐小程序项目效果展示：3.1开发前准备2项目分析音乐小程序项目页面结
构图：tab导航栏content内容区player音乐播放控件3.1开发前准备2项目分析音乐小程序项目目录结构：标签功能a
pp.js应用程序的逻辑文件app.json应用程序的配置文件pages/index/index.jsindex页面的逻辑文件pa
ges/index/index.jsonindex页面的配置文件pages/index/index.wxssindex页面的样式文
件3.1开发前准备2项目分析音乐小程序项目目录结构：标签功能pages/index/index.wxmlindex页面的结
构文件pages/index/info.wxml“音乐推荐”标签页的结构文件pages/index/play.wxml“播放器”标
签页的结构文件pages/index/playlist.wxml“播放列表”标签页的结构文件images图片文件3.1开发前准备
3项目初始化开发者工具创建空白项目：index{"navigationBarBackgroundColor":"#fff
","navigationBarTitleText":"音乐","navigationBarTextStyle":"bla
ck"}{"pages":["pages/index/index"]}3.2【任务1】标签页切换1任务分析标签页和
页面（info.wxml、play.wxml、palylist.wxml）结构图：3.2【任务1】标签页切换2前导知识sw
iper组件编写滑动页面结构：swiper组件cc">01r-item>2per>3.2【任务1】标签页切换2前导知识swiper组件常用属性：可选值说明默认indicator-dotsBoole
an是否显示面板指示点，默认为falseindicator-colorColor指示点颜色，默认为rgba(0,0,0,.3)in
dicator-active-colorColor当前选中的指示点颜色，默认为#000000autoplayBoolean是否自动
切换，默认为falsecurrentNumber当前所在滑块的index，默认为0current-item-idString当前所
在滑块的item-id（不能同时指定current）3.2【任务1】标签页切换2前导知识swiper组件常用属性：可选值说
明默认intervalNumber自动切换时间间隔（毫秒），默认为5000durationNumber滑动动画时长（毫秒），默认为
500circularBoolean是否采用衔接滑动，默认为falseverticalBoolean滑动方向是否为纵向，默认为fa
lsebindchangeEventHandlecurrent改变时会触发change事件3.2【任务1】标签页切换2前导知识
swiper组件编写滑动页面结构：item-id属性itemitem-id="a"style="background:#ccc">0itemitem-id="b"style="background:#ddd">1itemitem-id="c"style="background:#eee">2
3.2【任务1】标签页切换2前导知识include主要用途：将代码拆分到多个文件中，可以更方便地查找代码。将代码公共部分抽
取出来。通过外部文件引入。bodyludesrc="footer.wxml"/>include3.2【任务1】标签页切换3编写页面结构和样式音乐小程序基
础页面和样式：pages/index/index.wxml??
音乐推荐…???class="content">??ew>3.2【任务1】标签页切换3编写页面结构和样式音乐小程序基础页面和样式：pages/index/index.wxss
page{display:flex;flex-direction:column;background:#17181a
;color:#ccc;height:100%;?}…3.2【任务1】标签页切换3编写页面结构和样式测试页面inf
o.wxml、page.wxml、play.wxml文件：playlist.wxml:#ddd;color:#000;height:100%">playnd:#ccc;color:#000;height:100%">infound:#eee;color:#000;height:100%">playlistplay.wxmlInfo.w
xml3.2【任务1】标签页切换4实现标签页切换单击导航栏选项卡实现标签页切换：单击事件标签页切换样式.tab-item.
active{color:#c25b5b;border-bottom-color:#c25b5b;}s="tab-item{{tab==0?''active'':''''}}"bindtap="changeItem"data-ite
m="0">音乐推荐changeItem:function(e){…},3.2【任务1】标签页切换4实现标签
页切换通过滚动事件切换页面效果：滚动事件标签页切换样式.tab-item.active{color:#c25b5b;b
order-bottom-color:#c25b5b;}e="changeTab">changeTab:function(e){…},3.3【任务2】音乐推荐1任务分析音乐推
荐页面结构图：3.3【任务2】音乐推荐2前导知识scroll-view组件的属性及说明：可选值说明默认scroll-xBo
olean允许横向滚动，默认为falsescroll-yBoolean允许纵向滚动，默认为falsescroll-topNumbe
r/String设置竖向滚动条的位置scroll-leftNumber/String设置横向滚动条的位置bindscrol
ltoupperEventHandle滚动到顶部/左边时触发的事件3.3【任务2】音乐推荐2前导知识scroll-view
组件的属性及说明：可选值说明默认bindscrolltolowerEventHandle滚动到底部/右边时触发的事件scroll-
with-animationBoolean在设置滚动条位置时是否使用动画过渡scroll-into-viewString设置哪个方
向可滚动，则在哪个方向滚动到该元素。值应为某子元素id（id不能以数字开头）bindscrollEventHandle滚动时触发的
事件3.3【任务2】音乐推荐2前导知识scroll-view组件事件对象：roll-ystyle="height:200px"bindscroll="scroll">th:200%;height:400px;background:#ccc">scroll
:function(e){console.log(e.detail)},3.3【任务2】音乐推荐2前导知识scrol
l-view组件事件对象：3.3【任务2】音乐推荐2前导知识scroll-view组件事件对象参数分析：scrollLef
t：横向滚动条左侧到视图左边的距离。scrollTop：纵向滚动条上端到视图顶部的距离。scrollHeight：纵向滚动条在Y轴
上最大滚动距离。scrollWidth：横向滚动条在X轴上最大的滚动距离。deltaX：横向滚动条的滚动状态。deltaY：纵向滚
动条的滚动状态。3.3【任务2】音乐推荐2前导知识image组件属性及说明：可选值说明默认srcString图片资源地址m
odeString图片裁剪、缩放的模式，默认为''scaleToFill''lazy-loadBoolean图片是否懒加载，默认为fa
lse。只针对page与scroll-view下的image有效binderrorHandleEvent图片发生错误时的事件bin
dloadHandleEvent图片载入完成时的事件3.3【任务2】音乐推荐2前导知识image组件缩放模式：可选值说明s
caleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素。适用于容器与图片宽高比相同的情况，如果不同，图
片会变形。aspectFit保持纵横比缩放图片，使图片的长边能完全显示出来。适用于将图片完整显示出来。例如，详情页的图片aspec
tFill保持纵横比缩放图片，只保证图片的短边能完全显示出来，长边将会发生截取。适用于容器固定，图片自动缩放的情况，如列表页的缩略
图widthFix宽度不变，高度自动变化，保持原图宽高比不变3.3【任务2】音乐推荐2前导知识image组件9种裁剪模式：
可选值说明top不缩放图片，只显示图片的顶部区域bottom不缩放图片，只显示图片的底部区域center不缩放图片，只显示图片的中
间区域left不缩放图片，只显示图片的左边区域right不缩放图片，只显示图片的右边区域3.3【任务2】音乐推荐2前导知识
image组件9种裁剪模式：可选值说明topleft不缩放图片，只显示图片的左上边区域topright不缩放图片，只显示图片的
右上边区域bottomleft不缩放图片，只显示图片的左下边区域bottomright不缩放图片，只显示图片的右下边区域3.3
【任务2】音乐推荐2前导知识image组件缩放模式和裁剪模式测试：3.3【任务2】音乐推荐3内容区域滚动scrol
l-view组件："background:#eee;height:1000px">?已到达底部l-view>3.3【任务2】音乐推荐4轮播图swiper组件实现轮播图：pages/index/info.wxmliperclass="content-info-slide"indicator-color="rgba(255,255,255
,.5)"indicator-active-color="#fff"indicator-dotscircularautop
lay>…3.3【任务2】音乐推荐5功能按钮fl
ex布局实现功能按钮：pages/index/info.wxml>私人FM
…3.3【任务2】音乐推荐6热门音乐flex布局实现页面布局：pages/index/info.wxml
推荐歌曲iew>…
3.4【任务3】播放器1任务分析播放器标签页结构图：3.4【任务3】播放器1任务分析
播放器的具体功能进行分析：音乐信息：显示当前播放曲目的标题和艺术家。专辑封面：当音乐播放时，专辑封面会顺时针旋转。播放进度：显示
播放进度，调节音乐进度。3.4【任务3】播放器2前导知识audioCtx对象声明的方式：创建audioCtx上下文实例v
araudioCtx=wx.createInnerAudioContext();3.4【任务3】播放器2前导知识音
频API接口的属性及说明：可选值名称说明属性src音频资源的地址，用于直接播放startTime开始播放的位置（秒），默认为0au
toplay是否自动开始播放，默认为falseloop是否循环播放，默认为falsevolume音量。范围0~1。默认为13.4
【任务3】播放器2前导知识音频API接口的属性及说明：可选值名称说明属性duration音频的长度（秒）。在当前有合法的s
rc时返回（只读）currentTime音频的播放位置（秒）。在当前有合法的src时返回（只读）paused当前是是否暂停或停止状
态（只读）3.4【任务3】播放器2前导知识音频API接口的方法及说明：可选值名称说明方法play()播放pause()暂
停（暂停后的音频再播放会从暂停处开始播放）stop()停止（停止后的音频再播放会从头开始播放）seek()跳转到指定位置destr
oy()销毁当前实例onCanplay()音频进入可以播放状态的事件（参数为回调函数）onPlay()音频播放事件（参数为回调函数
）3.4【任务3】播放器2前导知识音频API接口的方法及说明：可选值名称说明方法onPause()音频暂停事件（参数为回
调函数）onStop()音频停止事件（参数为回调函数）onEnded()音频自然播放至结束的事件（参数为回调函数）onSeeked
()音频进行跳转操作的事件（参数为回调函数）onTimeUpdate()音频播放进度更新事件（参数为回调函数）onError()音
频播放错误事件（参数为回调函数）3.4【任务3】播放器2前导知识innerAudioContext案例使用：page/t
est/test.jsonReady:function(){varaudioCtx=wx.createInnerAudi
oContext()audioCtx.src=''http://……/xx.mp3''audioCtx.onPlay(functi
on(){console.log(''开始播放'')})…},3.4【任务3】播放器2前导知识slider组件属性及说
明：可选值类型说明minNumber最小值，默认为0maxNumber最大值，默认为100stepNumber步长，取值大于0，可
被(max-min)整除，默认为1valueNumber当前取值，默认为0activeColorColor已选择的颜色，默认为#1
aad19backgroundColorColor背景条的颜色，默认为#e9e9e93.4【任务3】播放器2前导知识sl
ider组件属性及说明：可选值类型说明block-sizeNumber滑块的大小，取值范围为12~28，默认为28block-co
lorColor滑块的颜色，默认为#ffffffshow-valueBoolean是否显示当前value，默认为falsebind
changeEventHandle完成一次拖动后触发的事件bindchangingEventHandle拖动过程中触发的事件3.4
【任务3】播放器2前导知识slider组件的使用：page/test/test.wxmlpage/test/test.j
ssliderChanging:function(e){console.log(e.detail.value)},erbindchanging="sliderChanging"show-value/>3.4【任务3】播放器2前导知识
slider组件的使用：3.4【任务3】播放器3定义基础数据音乐播放列表和音乐状态数据：pages/index/in
dex.jsstate:''paused'',playIndex:0,play:{…},playlist:[{id:1,
title:''钢琴协奏曲'',singer:''肖邦'',src:''http://…….mp3'',coverImgUrl:
''/images/cover.jpg''}…}],3.4【任务3】播放器4实现音乐播放功能音乐播放逻辑代码：pages
/index/index.jsaudioCtx:null,onReady:function(){this.audioCtx
=wx.createInnerAudioContext()//默认选择第1曲this.setMusic(0)},setM
usic:function(index){…},3.4【任务3】播放器4实现音乐播放功能底部播放器的结构代码：pag
es/index/index.wxmlss="player-cover"src="{{play.coverImgUrl}}"/>er-info">…3.4【任务3】播放器4实现音乐播放功能底部播放器的样式代码：p
ages/index/index.wxss.player{display:flex;align-items:center
;background:#222;border-top:1pxsolid#252525;height:112rpx
;}…3.4【任务3】播放器4实现音乐播放功能底部播放器暂停/播放按钮控制歌曲：pages/index/index.wx
mlpages/index/index.jsages/02.png"bindtap="play"/>png"bindtap="pause"/>play:function(){this.audioCtx.play()th
is.setData({state:''running''})}…3.4【任务3】播放器4实现音乐播放功能实现播放器切
换下一曲歌曲：pages/index/index.wxml"next"/>next:function(){varindex=this.data.playIndex>=th
is.data.playlist.length-1?0:this.data.playIndex+1this.se
tMusic(index)…},pages/index/index.js3.4【任务3】播放器5编写播放器页面播放器页面
结构代码：pages/index/play.wxml"content-play-info">{{play.title}}——{{play.
singer}}——…3.4【任务3】播放器5编写播放器页面播放器页面样
式代码：pages/index/play.wxss.content-play{display:flex;justify-c
ontent:space-around;flex-direction:column;height:100%;text-
align:center;}…3.4【任务3】播放器5编写播放器页面通过CSS3动画实现海报的旋转功能：pages/i
ndex/play.wxmlmagesrc="{{play.coverImgUrl}}"style="animation-play-state:{{
state}}"/>3.4【任务3】播放器5编写播放器页面通过CSS3动画实现海报的旋转功能：pages
/index/play.wxss.content-play-coverimage{animation:rotateImag
e10slinearinfinite;…}@keyframesrotateImage{from{transfor
m:rotate(0deg);}to{transform:rotate(360deg);}}3.4【任务3】播放器6
控制播放进度播放器页面下方的滑块结构：pages/index/play.wxmld33a31"block-size="12"backgroundColor="#dadada"value="{{play.pe
rcent}}"/>{{play.duration}}3.4【任务3】播放器6控制播放进度播
放器页面下方的滑块样式：pages/index/play.wxss.content-play-progress{display
:flex;align-items:center;…}.content-play-progress>view{fle
x:1;}3.4【任务3】播放器6控制播放进度显示音乐的播放进度：pages/index/index.jsonRead
y:function(){this.audioCtx=wx.createInnerAudioContext()var
that=thisthis.audioCtx.onEnded(function(){that.next()})…}
,3.4【任务3】播放器6控制播放进度控制进度条的长度控制歌曲播放进度：slider组件滑块事件处理函数sliderCh
ange:function(e){varsecond=e.detail.valuethis.audioCtx.
duration/100this.audioCtx.seek(second)},iderChange"activeColor="#d33a31"block-size="12"backgroundColor=
"#dadada"value="{{play.percent}}"/>3.5【任务4】播放列表1任务分析控制进度条的长度控制歌曲播放进度：3.5【任务4】播放列表2编写页面和结构样式控制进度条的长度控制歌曲播放进度：pages/index/playList.wxml…3.5【任务4】播放列表2编写页面和结构样式控制进度条的长度控制歌曲播放进度：pages/index/index.wxss.playlist-item{display:flex;align-items:center;border-bottom:1rpxsolid#333;height:112rpx;}…3.5【任务4】播放列表2编写页面和结构样式实现换曲功能：pages/index/index.jschange:function(e){this.setMusic(e.currentTarget.dataset.index)this.play()},本章总结本章讲解了音乐小程序项目的完整开发流程，其开发步骤包括页面结构的分析、样式的设计、组件的运用等。通过本章的学习，读者能够掌握小程序的基本交互逻辑的开发，能够运用API来实现项目中的特定功能，学会解决开发过程中常见的问题。 |
|
