10.小程序--详情页（五）播放页

1.歌词页面

 

 上面就可以实现歌词手动滚动了！那么怎么实现唱到哪句歌词就自动标记呐？

 想要实现下面的效果：

 不能直接给scroll-view上下一个padding，因为这样的相当于把scroll-view的空间缩小。可以按下面的方法做：

 现在还有一个问题，不会随着歌曲的播放自动滚动。

 

 

 

 

 

2.代码重构（难点）

为什么要进行代码重构？因为比如currentSong，lyricInfos等等不仅仅在music-player页面需要，在首页后面也要用到，所以就不能把数据写在这里。

之前已经介绍了三种共享方案：①App.js；②hy-event-store；③js export。 ①③的缺点是不是响应式的，所以采用②进行共享。

逻辑：当用户点击了歌曲列表里面的某首歌时，跳转到播放页，会传入一个id并保存，然后根据id去获取数据，那我们哪些数据需要共享呢？

首先：下面通过网络请求拿到的currentSong、durationTime以及lyricInfos肯定是可以拿走的。

 

 然后就在music-player中监听状态的改变：

 

 并在onload中调用这个函数:

 

 此时会发现还是没有数据，这是因为并没有调用actions里面的方法，那么在哪调用呢？

 

 其次：播放逻辑也不应该仅仅属于music-palyer页面

 

还是写在前面那个actions函数里面：

 

 

 这样以后在主页面切换歌曲就很方便了。调一下这个PlayMusicWithSongIdAction就可以了！

**插播一个小功能：先把返回做了！

不要只对一个小图标进行监听，应该对一个区域进行监听！

 

子组件发送事件

 

 

父组件监听事件

 

 

 

 

 现在当我们点击返回以后歌曲还是会播放的。

 

下去继续代码重构：

 

 这一部分东西到底需不要共享，其实要看我们返回到首页时要不要显示播放栏，不过我们这里还是写一下。

奇奇怪怪，代码怎么成下面这样了？

 

 现在我就是要把这一部分代码逻重构，不放在这里了。

还是放在这个方法里，见下面代码：

 

 但是这样的话这个函数里面代码太多了！所以我还是选择新建一个action函数：

 

 

 

 救命这一部分有点复杂，不过仔细想想是可以理清楚的。

首先我们把代码放到play-store.js中共享以后，就不能用this.setData给元素赋值了。要用ctx。

其次像sliderValue，lyricScrollTop这些值的设置不应该放在play-store.js中，而应该在music-player中设置，因为这些不需要共享。

 

 

 

 

3.操作部分

 

 3.1 btn-mode播放模式

首先肯定要有一个值要记录当前模式：playModelIndex:0--顺序播放，1--单曲循环，2--随机播放

那么我们要把这个PlayModelIndex放在哪里呢？放在播放页还是store？这次我们提前想清楚，就不需要做之前的代码重构了！

很显然是放在play-store.js中啦！

 

 在我们的播放页首页要监听点击事件：

 

 在处理点击事件时我们要考虑一个问题，这个播放模仿在播放页面本来我们就需要记录一下的。另外图标也是不应该写死的！

 

 

 

 

 

 一旦我们点击的时候playModeIndex就会变化，而我们又对playModeIndex进行了监听，所以playModeIndex和playModeName就会变化。

 

  3.1 btn-pause播放模式

首先还是要在play-store.js定义一个变量用于确定歌曲是暂停还是播放，默认是暂停：

 

 

 

 对于播放页来说也得拿到这个状态：

 

 监听按钮的点击：

 

 

 

 

 

插播一条小新闻：先来解决一个bug：有时候轮播图的高度会很高，轮播图里面的会跑到下面，而且这种情况不容易复现。

出现这种情况应该是轮播图高度计算出现了问题，我们这里轮播图的高度是拿到图片之后动态的获取图片的高度：

 

再思考一下，每次出现问题的时候那个轮播图的高度都是固定的，大约是240px，咦！小程序里面的image组件如果没有设置宽高，那么默认就是320*240px，我们这里没有设置高度，见下：

 

 但是我们是有设置一个mode="widthFix"的，就意味着会根据图片的宽高比动态的去计算高度。

思考一个整个逻辑：我们是先请求了banners数据，调用setData({})拿到最新的banners，拿到banners之后去遍历所有这里需要展示的image图片，之后的话应该是根据图片里面的宽高比计算出来一个高度设置对应的swiperHeight。问题可能就出在回调handleSwiperImageLoaded的时候还没有来得及计算出图片宽高比之后拿到的一个高度，也就是说它回调的有点早了。可能你又想了：不对啊，这里的轮播图有很多张，后面不是一定能计算正确吗？看清楚哦！我们之前为了让这不要频繁的获取宽高比是用了

节流函数，也就是说我们只计算了第一次240px，后面压根就没有计算。

所以解决办法就是，我们不要让节流只执行一次了，而是让它开始的时候执行一次，最后再执行一次，这就得修改throttle函数了。

 

继续解决两个小问题：

1.如果是同一首歌已经在播放，我们又点击进行，它会重新播放。 

 

 

 在这做一个判断就好了！

 

2.这里有点绝对了：

 

 改成下面这种：

 

 

 

 

3.在我们点击播放下一首歌的时候，将之前请求的数据清除掉。因为你点击进去一首新的歌时，会发现会出现上一首歌的信息对页面

先进行了渲染。残影！