11.小程序--详情页（六）播放页

现在我们继续来做这几个功能：

 

1.获取数据的逻辑

不管我们要做哪一个功能都要要请求播放列表的数据。而且这个歌曲列表是需要共享的。除了歌曲列表，我们还得记录歌曲列表中当前

播放歌曲的index。

 

 如果用户点击的是下面的某一首歌：

 

 那么一方面我就把这首歌作为要播放的歌曲，另一方面把这个列表作为播放列表。

如果我点击的是下面的某一首歌也是同样的逻辑：

 

 2.监听歌曲点击

歌曲点击我们之前已经监听过了：

 这里一方面只能拿到这首歌曲相关的信息，拿不到歌曲列表；另一方面这里也拿不到歌曲索引。

解决方法1：点击的时候把歌曲列表和索引全部传过来。

解决方法2：不要在这里监听了。

 

 

 

 

 

 其他也类似：

 

 

 

 

 

3.上一首、下一首功能

 那我们现在点击上一首下一首。

监听上一首下一首的点击：

 

 

需要注意的是我们点击上一首下一首其实并不一定就播放上一首下一首，因为还跟播放模式有关。 

还有就是除了播放页，其它地方也是可以进行下一首上一首播放的。

 

 

 

 

 

 第一个错误：上面倒数第二张图palyListIndex写错了，应该是playListIndex，而且playListSongs应该从this.data.rankingInfo.tracks

里面拿数据。

第二个错误：调用下面这个方法

 

 

 

 

 

 至此上一首下一首功能终于做完了，注意在不同的播放模式下，对应不同的上一首下一首规则哦！

4.自动播放下一首歌曲

如果一首歌播放完了，那么应该按照对应的模式自动的播放下一首歌曲。

 

 

 另外：

 

 5.播放工具栏

 

 

 希望在首页也能展示正在播放的这首歌的信息。

 

 

 

 现在大概就是这个样子：

 

 那怎么让图片有一种“突出”效果呐？

 

 这样就可以啦：

下面要做的一方面是图片要进行一个旋转，另一方面要对按钮进行控制。

我们先来做播放暂停功能，因为它会影响图片的旋转与否。

首先我要知道现在是播放还是暂停的状态：

 

 

 

 

 

 下面就做动画啦：（直接用的c3动画，没有用小程序提供的动画哦！）

 

 

 

另外可以看到这个工具栏挡住了本应该显示的页面的一些内容：

 

 

 

 这样就可以啦！

另外当我们第一次进入小程序没有播放任何音乐时：

 

 

 

 上面直接给一个padding-bottom不对哦！我们应该根据有没有播放工具栏来动态决定要不要增加。直接给一个占位的东西：

 

 

 

 

再补充一个功能：点我们点击了播放工具栏，是会直接跳到具体的播放页的：

 

 但是又有了一个问题，这是我们点击播放暂停按钮可会跳转，这是因为时间冒泡的原因，但是小程序里并没有e.stopPropagation方法可以

用于阻止事件冒泡，不过我们可以这样：

 

 

  6.后台播放

 

 

 

 整体逻辑就是在前台使用wx.createInnerAudioContext()播放，在后台使用wx.getBackgroundAudioManager()进行播放，可以通过生命周期

判断当前是前台还是后台。后台也是需要监控歌曲播放信息的，所以我们不如直接全部用后台接口做。

 

 

还要再json里面设置：

 

 还要设置一下title：

 

 

 

 

 

 现在又有一个问题：当我们拖动进度的时候，会先暂停一下再播放。首先说一下为什么会这样呢？

 

 是因为这里我们有做一个暂停，那么它就会改isPlaying的状态，后面发现歌曲继续播放，又会把isPlaying的状态改回来。

就直接这样来解决吧：