原创力文档- 1、本文档共15页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
微信小程序开发全案精讲
主讲人：小刚老师
第6章音乐类：仿酷狗音乐微信小程序
6.1需求描述及交互分析
6.2设计思路和相关知识点
6.3音乐首页界面布局设计
6.4音乐播放设计
微信小程序开发全案精讲
第6章音乐类：仿酷狗音乐微信小程序
6.5本地音乐顶部页签切换效果设计
6.6单曲列表设计
微信小程序开发全案精讲
需求描述
（1）酷狗音乐首页界面布局设计以及音乐播放设计；
6.1需求描述及交互分析
第6章音乐类：仿酷狗音乐微信小程序
微信小程序开发全案精讲
需求描述
（2）本地音乐页签切换效果以及列表展示效果，选中某个音乐会呈现为播放状态；
6.1需求描述及交互分析
第6章音乐类：仿酷狗音乐微信小程序
微信小程序开发全案精讲
需求描述
（3）单曲列表搜索设计，根据音乐名称进行检索出符合条件的单曲；
6.1需求描述及交互分析
第6章音乐类：仿酷狗音乐微信小程序
微信小程序开发全案精讲
交互分析
（1）在音乐播放首页里，单击音乐播放可以进行音乐播放；
（2）在音乐播放首页里，单击本地音乐，可以进入到本地音乐列表界面；
（3）在本地音乐列表界面，可以进行单曲、歌手、专辑、文件夹页签切换效果；
（4）展示本地音乐列表的单曲信息，单击单曲可以在播放状态和默认状态之间进行切换显示；
（5）按单曲名称可以检索出符合条件的单曲；
6.1需求描述及交互分析
第6章音乐类：仿酷狗音乐微信小程序
微信小程序开发全案精讲
设计思路
（1）进行界面布局的时候，需要使用微信小程序的组件和添加相应的样式；
（2）进行音乐播放的时候需要使用wx.playBackgroundAudio(OBJECT)媒体音频播放API，进行音乐的播放；
（3）设计本地音乐页签切换效果，需要借助于swiper滑块视图容器组件，动态切换不同页签对应的内容；
（4）首页音乐播放区域钮固定在底部设计需要使用position:fixed属性；
6.2设计思路及相关知识点
第6章音乐类：仿酷狗音乐微信小程序
微信小程序开发全案精讲
相关知识点
（1）媒体音频组件audio可以进行音频播放，它是需要在界面布局中使用该音频组件，才能进行音乐播放；
（2）音频组件控制wx.createAudioContext(audioId)的API，它创建并返回audio上下文audioContext对象；
（3）音频播放控制API：wx.playVoice(OBJECT)、wx.pauseVoice()、wx.stopVoice()；
（4）音乐播放控件wx.getBackgroundAudioPlayerState(OBJECT)，获取后台音乐播放状态；
（5）wx.getStorage(OBJECT)从本地缓存中异步获取指定key对应的内容，这是一个异步的接口；
（6）音乐播放控件wx.playBackgroundAudio(OBJECT)，使用后台播放器播放音乐；
（7）音乐播放控件wx.pauseBackgroundAudio()，暂停播放音乐；
6.2设计思路及相关知识点
第6章音乐类：仿酷狗音乐微信小程序
微信小程序开发全案精讲
音乐首页界面布局设计
6.3音乐首页界面布局设计
第6章音乐类：仿酷狗音乐微信小程序
微信小程序开发全案精讲
音乐播放设计
6.4音乐播放设计
第6章音乐类：仿酷狗音乐微信小程序
微信小程序开发全案精讲
本地音乐顶部页签切换效果设计
6.5本地音乐顶部页签切换效果设计
第6章音乐类：仿酷狗音乐微信小程序
微信小程序开发全案精讲
单曲列表设计
6.6单曲列表设计
第6章音乐类：仿酷狗音乐微信小程序
微信小程序开发全案精讲
音乐首页界面布局设计
音乐播放设计
本地音乐顶部页签切换效果设计
单曲列表设计
总结
第6章音乐类：仿酷狗音乐微信小程序
微信小程序开发全案精讲
谢谢观看
文档评论（0）