22. 尚硅谷_微信小程序_音乐播放功能完整实现.avi原创

好，咱们接着上节课来讲，那上节课这个只是一个基本的音乐播放。功能我们实现的，但是有有没有问题呢？最简单的一个，我这一点，我这个图片背景图没切换。你是不是应该整成我音乐播放的那个背景图啊？懂吗？来，看我写好的。这不后面有个背景图吗？啊，而且我一暂停它是没有切换回来啊，那也就是说我们当前这有个大图。叫hand，意味着这的图片其实也不能写死。对的吧，不能写死，来先把模拟器关掉，它那在这儿，首先这个是那个大图，它是否显示，它是不是也得根据我这个变量的判的。能理解吗？三。如果他为。

你是不是应该给一个背景图，如果为false就暂停的时候，是不是才能用原来的图啊，那在那这个东西，其实我们这也应该是个动态的。去哪取呢？Detail OB接点它是不是有个music music里边找谁呢？找这个背景图啊，这个背景图呢，也是我随便发的啊。拿过来。OK，那这个时候CTR保存一下，我们来到模拟器随便点击一个。对的吧，嗯，但是这个图啊，我没有专门去找对应的歌呢，这很这很明显这不是他唱的吧，嗯嗯，行，那这个是这一侧我们已经实现了，大家有没有什么问题呢？大家看看啊，我这边音乐播放着，我在这儿是不是也能点暂停啊，好，我点暂停。

你会发现这边还处于播放的状态。对吧，就是说我通过这边控制背景音乐的播放没有问题了，但是我在这一侧去操作音乐播放和暂停的时候，他这边不知道，那也就是说我们需要去监视一下这个音乐是否是否播放啊，如果说知道了它播放或者暂停，那我就能动态去修改这边的状态。来，那接下来我们要考虑的是监视背景音乐的播放和暂停，那如何去监视呢？这有，这特别简单，On什么什么当背景音乐。Play的时候，当背景音乐pass的时候。嗯，监听音乐播放暂停，OK，这两个API呢，倒是不难，里边是不是只需要传一个回调啊，回调的意思就是监听成功嘛，关键是这两个监听我们什么时候用。

这种监听是什么意思啊，你只需要把这个API让它生效了以后，那从我这生效了以后，它以后再播放和暂停，我是不是都可以接听啊，那其实这个事儿你越早干了越好。所以其实这个事情我们也可以在哪去监听他了，对你上来接听就好了，因为啥只要用户能看到这个界面，他是不是随时有可能点击啊，那你接听是不是必须得在他点击之前去接听啊。哎，所以这个时候我们可以在。漏的，那往上这不是漏的吗？Lo的这那在这我们去接听音乐播放，打过来，同样的还有一个，对，这个是接听我们的音乐暂停，暂停的话我把这个也拉过来。

OK。放到这，那这回调的话，我直接给他一个接头函数。来，我去，cons.log。呃，这是因为多了个什么，多了他。在这呢，我们去打一个log，哎，这呢是音乐播放，哎，同样的道理，把这个log过来放到这，这个是音乐暂停。打开我们的调试器，来到log来，我来看啊，就点击它。大家注意看啊，我那个东西虽然是放在lo的，你说他上来有监视吗？注意看我这有没有打印音乐播放或者暂停啊，没有，哎，那什么时候才有呢，看着。

什么播放来，然后呢，暂停，就是只有你在操作音乐的时候，他那是不是才能调调用成功的回调OK。那你看我操作的是这边，他这是不是也能接听到，那我们就可以判断音乐是否播放，如果说音乐播放，你说要干什么事情很好修改，谁是不要修改这个是否播放的标识啊，哎，那这个时候来，我们在这应该是修改它的状态值。this.set贝塔，大家现在能知道我为什么用阶段函数吧？OK，那在这个里面我们要修改的是它在这直接为出。这肯定能确定下来吧，哎，同样的道理，我们这一堆放到这，那这个呢，为。

走。来，我们让他播放一下没问题。然后呢，我在这边去控制走走是不是就好了，嗯，看上去好像又没问题了，来，我让他播放着，我去后退，我再进来，或者说啊，我再进来一下对吗？不对吧，为什么不对，我这音乐是播放的状态，但是这边的状态是不是还是那个来看未播放的状态啊，这个本质原因是不是跟我们刚刚做这个是一样的，哎，其实你缓存到这个sorry肯定是没问题的，那但是我们可以用另外一种方式，用另外一种方式来先把D停掉。

哪一种方式呢？嗯，在教大家一种，我们之前有个app.gs我们是不是一直没用过，这是不是全局的配置啊，注册小程序吗？我们来看一下啊，我们去到框架里边找到这个注册程序，这不APP吗？还记不记得它里边应该是有一个，哎，它这还没列出来，应该有一个也叫data塔的选项，也叫data塔，往下我们找找看他下面有没有什么示例。呃，之前还有。我看啊哦，他这没有没有写，那我就直接在这变这边写吧，在这呢也能写一个什么。Data。这个结构其实跟我们在这这个配置上面是不是一模一样，哎，那既然这也能初始化数据，我就给他写一个写一个东西，那现在我要考虑我要写什么，大家想。

我这儿。后退，你比如我再进来，我要判断音乐是否在播放，对吧。你说这个页面的音乐是否在播放，应该有几个条件？或者还有这种情况来看一下我在这是不是音乐播放我后退。我到下一个页面了。到下一个页面了，你说下一个页面这应该是播放还是未播放，应该是未播放才对，为什么虽然说这个音乐在播放，但是不是他当前页面的音乐吧。那你说我们都需要什么，要几个条件两个有同学说哪两个，第一个肯定要有一个是否在播放。

对吧，还有什么很好，还有就是是不是你当前页面在播放，大家能理解吗？哎，因为刚开始没有，所以我这些是不是都初始化，这初始化没呢？那我在APP这初始完的数据我怎么用它其实官网上给出来了，大家可以看一下。呃，看这个，这有个get APP。全局的get APP可以获取到小程序的实例。啊，这个时候呢，我可以试着给大家去。整一下它，我们来到TGS，注意我在最上边这，我去做一个操作在这啊，我let一个AP，假如塔是吧，等于什么get ABB，注意它是一个方法，对用吧，哎，我现在是不是能有一个返回值啊，我去conslo。

app.lo这个APP送到了，就给他来一个这个APP，我们来看一下。来，让他进来。呃，打印的东西在哪呢？我们要找一个这个。看这不DTLGS吗？第几行，第四行吧，来我们点开，大家看这个是不是我刚刚初始化的。对的吧，嗯，下面这些其实也是小程序实力的那些生命周期，这个倒不难，这个data有了，我们既然能拿到这个整个对象呢，其实我能操作它里边的数据了。能操作数据了，那现在我们来分一下我什么时候去操作这个数据。

你想当你音乐播放的时候，你是不是要把你当前页面的状态去存到APP里边，对的吧，你比如说我当前页面的下标为零，我是不是应该在这从个零是否播放为出。那只有你把这些信息存进去，下次再进来，我一读这个状态是不是才能判断我这个页面是否在播放。哎，那这个时候大家看一下我们之前。接听音乐播放和暂停其实还有用。你想当我一旦上来接听到这个页面，它播放了你，我要给他做一些事情。要做什么事情呢？我们应该去修改这个APP data中的数据。

AB data塔式里面有个data塔对吧？它是不是有一个叫is play的值修改成什么处。来暂停一下啊，大家好像好像没理解我在干嘛。我们之前做这个收藏，未收藏，我是不是存到那个本地了，当然了，我现在拿那个肯定能实现。但是这不是想让大家多学一点吗？我再告诉你一种，就是说我们可以把一些变量标识是不是放到公共的地方，我为什么放到这，你说下边所有的页面都能看到它。这个就好像大家在view里边，你们定义组件最外层，什么ABB组件啊，假如说我里边有两个子组件，它俩是并行的。同级，那这样的话，这两个子组间通信方便吗？不方便。

但是他俩都能看到谁啊，ABB，所以我是不是可以把状态初始化的stage放到这，我既可以给他，也可以给他，当然了，他们反向是不是也能超过了？是一样的道理吗？OK，那知道这个以后，我这就是初始化的变量，那你哪个页面音乐一旦播放了，你是不是要去更改一下这个数据啊，我去声明一下，当前是我的页面在播放，所以上来这改没有问题吧。那接下来还有什么呢？别忘了还有一个叫page index等于什么？哎，在这我是不是还得去取一下它，我看不用咱上面这是不是有个in。这不是我这定义过吗？那所以直接给他更新进去。同样的道理，你播放的时候要修改，你说你暂停的时候要不要，为什么要？

有这样一种场景啊，我给大家演示一下。呃，打个比方，就这个吧，我现在在这，我一点击播放它是不是立马把APP里面那个值修改了，修改了假如说我点的暂停，你不修改的话，你说会有什么问题。我这个退出去再进来，它还是在播放状态。能理解吗？啊，所以说我们在音乐暂停的时候也得去修改一下，修改什么呢。其实这个要不要修改，其实这行代码能省略。暂停的时候我又没有改下掉啊，为什么说不用了。

什么时候点暂停啊。他之前在播放的时候，我才能点暂停对的吧。之前在播放的时候点暂停啊，那之前播放的时候我是不是已经做了一个操作。下边数对的，所以这一行代码我们先做掉它可以少写一行，代码是一行，嗯，哎，你们以后写代码就像过日子一样啊，得会过，别写的乱七八糟的，来3S我们去保存一下，写完这以后你说够吗？我们现在是吧，只是把这个状态值从到的APP里加死了，关键是啥，你是不是还在读取它，什么时候读啊，越早越好，哎，大家已经有这个套路了啊，所以呢，现在我们应该在这儿上来做一件事情，哎做做什么事情呢，你得去。

判断音乐啊，干嘛是否在播放，因为啥我一点这个页面，我上来肯定要去判断一下，如果在播放的话，我是不是应该立马去切换这边的状态啊。OK，那大家懂没懂？就在这儿了，我怎么判断当前的页面音乐是否在播放？根据哪来判断？不还是app.gs吗？你之前从不就是为了每次进来去看到吗？那怎么写，我就写了它吧，If。你说需要几个条件？哎。首先，AP塔中那个贝塔点is play是不是必须为触？他没出了，一定是我当前页面在播放吗？不一定，你还得配合一个东西。

AB塔中的那个配index。写完了吗？它应该是否等等于我当前页面的线标才对？对吧，如果说能进这个判断说明什么。音乐在播放，那这个时候你是不是上来应该去做这样一个事情。能懂不？哎，CTRLS保存一下。这该买房啥？处吧。哦，有同学说还有个else是吗？L，我又做处理了，它本身就是默认为house，嗯，能考虑这个挺好啊，来，我们测一下，看看是不是点击过来找你。

好来后退再进来，对了吧，来，关键是我还要切到其其他页面，在这对的吧，在这就是应该是这个状态才对，因为这个音乐是不是不是它页面的，你想要它页面怎么办？你再点这不就切了一个吗？嗯，OK啊，那这个是一个音乐括号的一个完整的实现，来我把这个视频听一下。