? ? ? 此文章用于总结自己的知识点。有这个项目有兴趣的伙伴可以点击下方链接购买学习
小程序音乐项目开发实战-大神coderwhy新课-学习视频教程-腾讯课堂课程简介
一、点击榜单内容跳转到榜单详细页面并渲染?
1.area-header中更多的跳转
? ? ? ? 点击更多跳转到歌曲展示页面
????????
? ? ? ? ?area-header组件中给更多监听点击事件
? ? ? ? ?然后再index.js定义点击的方法,并把点击事件传到使用area-header的music页面中
? ? ? ? 在music页面接受点击事件并监听函数handleMoreClick
?
? ? ? ? ?在music页面中实现页面的跳转并传递参数hotRanking
? ? ? ? ?跳转到detail-song页面时传递 rankingName
?
2.巅峰榜中三种榜单的跳转
????????
?????????给榜单的每个组件添加点击事件的监听,并传递参数idx=index,用于区分点击的是哪一个榜单
? ? ? ? 当榜单发生点击的时候根据传递过来的index在ranking-store中根据rankingmap就可以知道想要获取的榜单类型
? ? ? ? 若ranking-store没有也可以自己定义一个转化的数组
?
?????????event.currentTarget.dataset用来获取自定义组件点击时传递过来的参数
? ? ? ? 根据id转化后的rankingName进行跳转
3.在detail-song页面中根据传递过来的rankingName发送请求获取数据并渲染
? ? ? ? 3.1获取数据
? ? ? ? 在detail-songs页面中获取传递过来的ranking并保存?
?
????????
? ? ? ? ?根据ranking在rankingStore中获取对应的数据(状态管理内容可看上一篇博客)
? ? ? ? ?将获取到的值保存到songInfo中
? ? ? ? ?页面销毁时取消对ranking的监听
? ? ? ? 3.2渲染数据
? ? ? ? ?渲染效果：
????????
? ? ? ? ?index.wxml页面
? ? ? ? ?页面中使用了song-item-v2组件,下面来封装一下
? ? ? ? ?
? ? ? ? index.wxml
? ? ? ? inndex.wxss
?
?
? ? ? ? index.json? ?index是用来展示歌曲的次序
?
4.热门歌单每个item的点击,并获取相对应的数据
????????
?????????index.wxml? 将item 传出去?
? ? ? ? index.js? ?将item中的id和type作为参数跳转到detail-songs页面
? ? ? ? item.id是用于发送网络请求，type=menu是因为歌单中的detail-songs和榜单中的detail-songs有一些页面上的区别,可以根据类型来显示哪一种布局
? ? ? ? ?在api_music中封装获取歌单中每个item的数据
? ? ? ? ?在detail-songs中获取传递过来的类型,如果的menu则获取歌单中的数据,若是rank则获取榜单的数据
? ? ? ? ?将获取后的数据保存起来
? ? ? ? 在之前榜单跳转的时候一开始没有设置type参数,现在给他加上
?4.1根据传递的类型动态地显示不同的布局
? ? ? ? detail-songs中,根据type的不同显示或隐藏歌曲详情页的内容?
? ? ? ? 点击榜单和歌单展示的内容不同
? ? ? ? ?上面使用了歌单的自定义组件song-detail-header,下面来封装一下这个组件
?????????index.wxml
? ? ? ? index.wxss?????????
?
?
? ? ? ? ?index.js 获取数据
?
?
?
?