微信小程序开发实战第3章-音乐小程序项目课件.pptx

1、第3章 音乐小程序项目开发前准备【任务2】音乐推荐【任务4】播放列表【任务1】标签页切换【任务3】播放器学习目标掌握swiper组件、scroll-view组件的使用12掌握image组件的使用3掌握音频API的使用4掌握slider组件的使用掌握掌握掌握掌握目录点击查看本节相关知识点点击查看本节相关知识点【任务1】标签页切换3 3.2.23 3.1.1开发前的准备点击查看本节相关知识点3 3.3.3【任务2】音乐推荐点击查看本节相关知识点3.43.4【任务3】播放器目录点击查看本节相关知识点3.53.5【任务4】播放列表知识架构3.1 开发前的准备开发前的准备 1项目展示2项目分析3项目初始

2、化知识架构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 开发前准备 项目展示音乐小程序项目效果项目效果展示：项目分析 音乐小程序项目页面结构图页面结构图：p tab导航栏p content内容区p player音乐播放控件

3、3.1 开发前准备 项目分析 音乐小程序项目目录结构目录结构：3.1 开发前准备 标签标签功能功能app.js应用程序的逻辑文件app.json应用程序的配置文件pages/index/index.jsindex页面的逻辑文件pages/index/index.jsonindex页面的配置文件pages/index/index.wxssindex页面的样式文件 项目分析 音乐小程序项目目录结构目录结构：3.1 开发前准备 标签标签功能功能pages/index/index.wxmlindex页面的结构文件pages/index/info.wxml“音乐推荐”标签页的结构文件pages/inde

4、x/play.wxml“播放器”标签页的结构文件pages/index/playlist.wxml“播放列表”标签页的结构文件images图片文件 pages:pages/index/index 项目初始化 3.1 开发前准备 navigationBarBackgroundColor:#fff,navigationBarTitleText:音乐,navigationBarTextStyle:black开发者工具创建空白项目：index 任务分析 标签页和页面标签页和页面（info.wxml、play.wxml、palylist.wxml）结构图：3.2【任务1】标签页切换 0 1 2 前导知识

5、 swiper组件组件编写滑动页面结构：3.2【任务1】标签页切换 swiper组件可选值可选值说明说明默认默认indicator-dotsBoolean是否显示面板指示点，默认为falseindicator-colorColor指示点颜色，默认为rgba(0,0,0,.3)indicator-active-colorColor当前选中的指示点颜色，默认为#000000autoplayBoolean是否自动切换，默认为falsecurrentNumber当前所在滑块的index，默认为0current-item-idString当前所在滑块的item-id（不能同时指定current）前导知识

6、 3.2【任务1】标签页切换 swiper组件组件常用属性：可选值可选值说明说明默认默认intervalNumber自动切换时间间隔（毫秒），默认为5000durationNumber滑动动画时长（毫秒），默认为500circularBoolean是否采用衔接滑动，默认为falseverticalBoolean滑动方向是否为纵向，默认为falsebindchangeEventHandlecurrent改变时会触发change事件 前导知识 3.2【任务1】标签页切换 swiper组件组件常用属性：0 1 2 前导知识 swiper组件组件编写滑动页面结构：3.2【任务1】标签页切换 item-

7、id属性 body 前导知识 include主要用途：p 将代码拆分到多个文件中拆分到多个文件中，可以更方便地查找代码。p 将代码公共部分抽取出来公共部分抽取出来。通过外部文件引入。3.2【任务1】标签页切换 include 音乐推荐 编写页面结构和样式 音乐小程序基础页面和样式页面和样式：3.2【任务1】标签页切换 pages/index/index.wxmlpage display:flex;flex-direction:column;background:#17181a;color:#ccc;height:100%;编写页面结构和样式 音乐小程序基础页面和样式页面和样式：3.2【任务1】

8、标签页切换 pages/index/index.wxss playinfoplaylist 编写页面结构和样式 测试页面info.wxml、page.wxml、play.wxml文件：3.2【任务1】标签页切换 Info.wxmlplaylist.wxmlplay.wxml3.2【任务1】标签页切换 实现标签页切换 单击导航栏导航栏选项卡实现标签页切换：音乐推荐changeItem:function(e),单击事件.tab-item.active color:#c25b5b;border-bottom-color:#c25b5b;标签页切换样式3.2【任务1】标签页切换 实现标签页切换 通过滚

9、动事件滚动事件切换页面效果：changeTab:function(e),滚动事件.tab-item.active color:#c25b5b;border-bottom-color:#c25b5b;标签页切换样式3.3【任务2】音乐推荐 任务分析 音乐推荐页面结构图：3.3【任务2】音乐推荐 前导知识 scroll-view组件组件的属性及说明：可选值可选值说明说明默认默认scroll-xBoolean允许横向滚动，默认为falsescroll-yBoolean允许纵向滚动，默认为falsescroll-topNumber/String设置竖向滚动条的位置scroll-leftNumber/S

10、tring设置横向滚动条的位置bindscrolltoupperEventHandle滚动到顶部/左边时触发的事件3.3【任务2】音乐推荐 前导知识 scroll-view组件组件的属性及说明：可选值可选值说明说明默认默认bindscrolltolowerEventHandle滚动到底部/右边时触发的事件scroll-with-animationBoolean在设置滚动条位置时是否使用动画过渡scroll-into-viewString设置哪个方向可滚动，则在哪个方向滚动到该元素。值应为某子元素id（id不能以数字开头）bindscrollEventHandle滚动时触发的事件3.3【任务2】

11、音乐推荐 前导知识 scroll-view组件组件事件对象：scroll:function(e)console.log(e.detail),3.3【任务2】音乐推荐 前导知识 scroll-view组件组件事件对象：3.3【任务2】音乐推荐 前导知识 scroll-view组件组件事件对象参数分析：p scrollLeft：横向滚动条左侧到视图左边的距离。p scrollTop：纵向滚动条上端到视图顶部的距离。p scrollHeight：纵向滚动条在Y轴上最大滚动距离。p scrollWidth：横向滚动条在X轴上最大的滚动距离。p deltaX：横向滚动条的滚动状态。p deltaY：纵向

12、滚动条的滚动状态。3.3【任务2】音乐推荐 前导知识 image组件组件属性及说明：可选值可选值说明说明默认默认srcString图片资源地址modeString图片裁剪、缩放的模式，默认为scaleToFilllazy-loadBoolean图片是否懒加载，默认为false。只针对page与scroll-view下的image有效binderrorHandleEvent图片发生错误时的事件bindloadHandleEvent图片载入完成时的事件3.3【任务2】音乐推荐 前导知识 image组件组件缩放模式：可选值可选值说明说明scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸

13、至填满image元素。适用于容器与图片宽高比相同的情况，如果不同，图片会变形。aspectFit保持纵横比缩放图片，使图片的长边能完全显示出来。适用于将图片完整显示出来。例如，详情页的图片aspectFill保持纵横比缩放图片，只保证图片的短边能完全显示出来，长边将会发生截取。适用于容器固定，图片自动缩放的情况，如列表页的缩略图widthFix宽度不变，高度自动变化，保持原图宽高比不变3.3【任务2】音乐推荐 前导知识 image组件组件9种裁剪模式：可选值可选值说明说明top不缩放图片，只显示图片的顶部区域bottom不缩放图片，只显示图片的底部区域center不缩放图片，只显示图片的中间区

14、域left不缩放图片，只显示图片的左边区域right不缩放图片，只显示图片的右边区域3.3【任务2】音乐推荐 前导知识 image组件组件9种裁剪模式：可选值可选值说明说明top left不缩放图片，只显示图片的左上边区域top right不缩放图片，只显示图片的右上边区域bottom left不缩放图片，只显示图片的左下边区域bottom right不缩放图片，只显示图片的右下边区域3.3【任务2】音乐推荐 前导知识 image组件组件缩放模式和裁剪模式测试：3.3【任务2】音乐推荐 scroll-view组件组件：已到达底部 内容区域滚动 3.3【任务2】音乐推荐 轮播图 swiper组件

15、组件实现轮播图：pages/index/info.wxml3.3【任务2】音乐推荐 功能按钮 flex布局布局实现功能按钮：私人FM pages/index/info.wxml3.3【任务2】音乐推荐 热门音乐 flex布局布局实现页面布局：推荐歌曲 pages/index/info.wxml3.4【任务3】播放器 任务分析 播放器标签页结构图：3.4【任务3】播放器 任务分析 播放器的具体功能进行分析：p 音乐信息音乐信息：显示当前播放曲目的标题和艺术家。p 专辑封面专辑封面：当音乐播放时，专辑封面会顺时针旋转。p 播放进度播放进度：显示播放进度，调节音乐进度。3.4【任务3】播放器 前导知

16、识 audioCtx对象对象声明的方式：var audioCtx=wx.createInnerAudioContext();创建audioCtx上下文实例3.4【任务3】播放器 前导知识 音频音频API接口的属性及说明：可选值可选值名称名称说明说明属性src音频资源的地址，用于直接播放startTime开始播放的位置（秒），默认为0autoplay是否自动开始播放，默认为falseloop是否循环播放，默认为falsevolume音量。范围01。默认为13.4【任务3】播放器 前导知识 音频音频API接口的属性及说明：可选值可选值名称名称说明说明属性duration音频的长度（秒）。在当前有合

17、法的src时返回（只读）currentTime音频的播放位置（秒）。在当前有合法的src时返回（只读）paused当前是是否暂停或停止状态（只读）3.4【任务3】播放器 前导知识 音频音频API接口的方法及说明：可选值可选值名称名称说明说明方法play()播放pause()暂停（暂停后的音频再播放会从暂停处开始播放）stop()停止（停止后的音频再播放会从头开始播放）seek()跳转到指定位置destroy()销毁当前实例onCanplay()音频进入可以播放状态的事件（参数为回调函数）onPlay()音频播放事件（参数为回调函数）3.4【任务3】播放器 前导知识 音频音频API接口的方法及说

18、明：可选值可选值名称名称说明说明方法onPause()音频暂停事件（参数为回调函数）onStop()音频停止事件（参数为回调函数）onEnded()音频自然播放至结束的事件（参数为回调函数）onSeeked()音频进行跳转操作的事件（参数为回调函数）onTimeUpdate()音频播放进度更新事件（参数为回调函数）onError()音频播放错误事件（参数为回调函数）3.4【任务3】播放器 前导知识 innerAudioContext案例使用：onReady:function()var audioCtx=wx.createInnerAudioContext()audioCtx.src=http:

19、/xx.mp3audioCtx.onPlay(function()console.log(开始播放),page/test/test.js可选值可选值类型类型说明说明minNumber最小值，默认为0maxNumber最大值，默认为100stepNumber步长，取值大于0，可被(max-min)整除，默认为1valueNumber当前取值，默认为0activeColorColor已选择的颜色，默认为#1aad19backgroundColorColor背景条的颜色，默认为#e9e9e93.4【任务3】播放器 前导知识 slider组件组件属性及说明：可选值可选值类型类型说明说明block-si

20、zeNumber滑块的大小，取值范围为1228，默认为28block-colorColor滑块的颜色，默认为#ffffffshow-valueBoolean是否显示当前value，默认为falsebindchangeEventHandle完成一次拖动后触发的事件bindchangingEventHandle拖动过程中触发的事件3.4【任务3】播放器 前导知识 slider组件组件属性及说明：3.4【任务3】播放器 前导知识 slider组件组件的使用：page/test/test.wxmlsliderChanging:function(e)console.log(e.detail.value)

21、,page/test/test.js3.4【任务3】播放器 前导知识 slider组件组件的使用：3.4【任务3】播放器 定义基础数据 音乐播放列表和音乐状态数据：playlist:id:1,title:钢琴协奏曲,singer:肖邦,src:http:/.mp3,coverImgUrl:/images/cover.jpg,pages/index/index.jsstate:paused,playIndex:0,play:,3.4【任务3】播放器 实现音乐播放功能 音乐播放逻辑代码：audioCtx:null,onReady:function()this.audioCtx=wx.createI

22、nnerAudioContext()/默认选择第1曲 this.setMusic(0),setMusic:function(index),pages/index/index.js3.4【任务3】播放器 实现音乐播放功能 底部播放器的结构代码：pages/index/index.wxml3.4【任务3】播放器 实现音乐播放功能 底部播放器的样式代码：.player display:flex;align-items:center;background:#222;border-top:1px solid#252525;height:112rpx;pages/index/index.wxssplay:

23、function()this.audioCtx.play()this.setData(state:running)3.4【任务3】播放器 实现音乐播放功能 底部播放器暂停/播放按钮控制歌曲：pages/index/index.wxmlpages/index/index.jsnext:function()var index=this.data.playIndex=this.data.playlist.length-1?0:this.data.playIndex+1 this.setMusic(index),3.4【任务3】播放器 实现音乐播放功能 实现播放器切换下一曲歌曲：pages/index

24、/index.wxmlpages/index/index.js play.title play.singer 3.4【任务3】播放器 编写播放器页面 播放器页面结构代码：pages/index/play.wxml.content-play display:flex;justify-content:space-around;flex-direction:column;height:100%;text-align:center;3.4【任务3】播放器 编写播放器页面 播放器页面样式代码：pages/index/play.wxss 3.4【任务3】播放器 编写播放器页面 通过CSS3动画实现海报的旋

25、转功能：pages/index/play.wxml.content-play-cover image animation:rotateImage 10s linear infinite;keyframes rotateImage from transform:rotate(0deg);to transform:rotate(360deg);3.4【任务3】播放器 编写播放器页面 通过CSS3动画实现海报的旋转功能：pages/index/play.wxssplay.duration3.4【任务3】播放器 控制播放进度 播放器页面下方的滑块结构：pages/index/play.wxml.con

26、tent-play-progress display:flex;align-items:center;.content-play-progress view flex:1;3.4【任务3】播放器 控制播放进度 播放器页面下方的滑块样式：pages/index/play.wxssonReady:function()this.audioCtx=wx.createInnerAudioContext()var that=this this.audioCtx.onEnded(function()that.next(),3.4【任务3】播放器 控制播放进度 显示音乐的播放进度：pages/index/in

27、dex.js3.4【任务3】播放器 控制播放进度 控制进度条的长度控制歌曲播放进度：sliderChange:function(e)var second=e.detail.value*this.audioCtx.duration/100 this.audioCtx.seek(second),slider组件滑块事件处理函数3.5【任务4】播放列表 任务分析 控制进度条的长度控制歌曲播放进度：3.5【任务4】播放列表 编写页面和结构样式 控制进度条的长度控制歌曲播放进度：pages/index/playList.wxml3.5【任务4】播放列表 编写页面和结构样式 控制进度条的长度控制歌曲播放进

28、度：.playlist-item display:flex;align-items:center;border-bottom:1rpx solid#333;height:112rpx;pages/index/index.wxss3.5【任务4】播放列表 编写页面和结构样式 实现换曲功能：change:function(e)this.setMusic(e.currentTarget.dataset.index)this.play(),pages/index/index.js本章总结本章讲解了音乐小程序项目的完整开发流程，其开发步骤包括页面结构的分析、样式的设计、组件的运用等。通过本章的学习，读者能够掌握小程序的基本交互逻辑的开发，能够运用API来实现项目中的特定功能，学会解决开发过程中常见的问题。