5.小程序--音乐页面其他内容

1.这里就是要封装一个区域内的header组件。

1.1自定义组件

父组件向子组件传值，不过要注意，这里不是default，而是value哦！

 1.2.注册组件

在父组件的index.json中注册组件，然后就可以直接使用自定义组件啦！

 1.3.展示与不展示

虽然基本功能实现了，但是右边这个可能展示也可能不展示（我这里就只做这个啦！），甚至展示的内容也想要是动态的，然后微信小程序中并没有

提供插槽，那怎么办呢？

 

 

 2.状态管理（重点）

小程序里实现数据共享

 用到了coderwhy封装的一个基于事件的全局状态管理工具，可以在Vue、React、小程序等任何地方使用。

 记得在工具里面构建npm哦！

 

 

 怎么把数据放到hotRanking中呢？

 

 3.推荐歌曲列表展示

 下面又是要封装组件啦！

 还是老一套，记得注册以及

 现在大概就做成这样啦！

 4.热门歌曲展示

4.1布局

 

 用到了一个原生组件scroll-view。

在自定义组件中先来做一下布局测试：

 看看效果：

 左右两边的空白还是有点问题，想要实现是左右两边能够覆盖整个宽度。对wxss样式进行一些调整。

 

 4.2数据请求

首先网络请求肯定是在service文件夹下进行的：

 那么由谁来发送这个网络请求呢？一般不会在自定义组件中发送，而是在父组件中发送，然后把数据传给子组件进行展示。

 4.3数据展示

好啦，现在数据获取到啦，下面就开始展示数据。

 里面每个方块内的内容再封装一个组件

记得注册、property定义哦！

 

 推荐歌单就很简单，这里就不写啦！

 5.巅峰榜制作

5.1数据请求

虽然每个榜单只在music页面只展示前三条，但是接口并没有提供分页请求的操作，而且这里的数据在点击后在新的页面还会展示，所以我们就用store存储呗！

数据共享！

 不过使用switch的话case判断有点多，这里可以使用map进行一下优化。

5.2数据保存（难点）

（这里的一些数据处理逻辑感觉还是挺难的o(╥﹏╥)o）

具体要展示的数据的当然要在组件中拿：

 

 这样就可以拿到一个巅峰榜的数据啦：

 但是有一个问题，我们还要拿到两个巅峰榜的数据，那又要写两个回调函数，那代码可太重复啦！

 5.3数据展示

 自定义子组件：

 至此音乐页面全部完成，下面就可以做跳转页面咯！