微信小程序入门级教程-08

前言

  上节课讲解的基本的音频播放，但是我们在最后说了音频播放其实是有问题的！不知道小伙伴们有没有发现有什么问题？
  问题1：点击音频总控开关，页面上的播放暂停图标之间没有随之切换。
  问题2：播放音乐，返回上一页，然后重新点进文章详情，音乐依旧在播放，但是图标是默认的未播放状态图标。

问题一

问题二

目录

https://www.jianshu.com/p/9c9b555b52e8

问题一的解决办法：监听事件

  由于上述问题的产生，所以微信也给我们提供了几个监听音频的事件，分别是开始，暂停和停止这三个监听事件。由于我们这里不需要停止的事件，所以我们只需要监听开始和暂停，再对应手动修改播放状态值即可动态修改播放和暂停图标来回的切换了，代码如下：

//由于是监听，所以我们在这里就把监听事件放在onload函数里。
// 监听播放： wx.onBackgroundAudioPlay（callback）
// 监听暂停： wx.onBackgroundAudioPause（callback）
// callback：回调函数中可以做自己想写的代码块
onLoad: function (options) {
  let that = this;
  // 监听音乐启动
  wx.onBackgroundAudioPlay(function(){
    that.setData({
      isPlaying: true
    })
  })
  // 监听音乐暂停
  wx.onBackgroundAudioPause(function(){
    that.setData({
      isPlaying: false
    })
  })
}

效果如下：

效果图

  大家可以看到，由于监听了音频的事件，所以我们这下子点击播放器的播放和暂停，我们页面中的播放和暂停图片按钮也可以随之切换了。

问题二的解决办法：

1. 缓存

• 优点：可以实现手动修改图标以达到预期效果
• 缺点：一直存在，所以如果播放状态下，我们直接中断微信进程了，那么下次进入文章的详情页，那么音乐将自动播放！这不是我们想要的效果。所以在这里我们使用下面的方法，全局变量！

2. 全局变量 [推荐]

疑问：在我们的项目中，怎么声明全局变量呢？
答案：app.js

app.js在小程序的项目中，充当着全局和核心的概念，所以我们在app.js中声明一个全局变量，和一般的页面声明略有区别，详情如下：

app.js

// 区别1：一般页面以Page({})声明，而我们app.js中则以App({})来声明
// 区别2：一般页面变量区域以data声明，在app.js中则以globalData声明
App({
  globalData: {
    ISPLAYING: false // 播放状态的全局变量
  }
})

talk-details.js

// 在onload函数中获取全局变量，然后复制给当前页面的播放状态变量isPlaying
onLoad: function (options) {
  let that = this;
  // 检验播放的文章ID是否一致，避免点击其余文章，也出现正在播放状态
  that.setData({
    isPlaying: app.globalData.ISPLAYING
  })
}

  结果：可以看到播放状态中，我们返回上一级页面，然后重新进入页面时，播放状态依旧是播放状态，但是这里，会出现一个BUG，什么BUG呢？
  答案：就是在播放状态时，返回上一页后，无论你进入哪一篇文章，播放器状态都是正在播放，这明显不对呀？我们播放的是第一篇文章，怎么进入第二篇，第三篇文章，也是播放状态呢？
  那么我们到底是播放的哪一篇文章的音乐呢？这就是我们单纯设置了一个播放状态导致的BUG！那么我们该怎么解决呢？相信大家都可以很快的想到解决办法，那就是记录文章ID，只有当文章ID是我们记录的那篇，我们才修改播放状态，否则就不做任何操作，这样子，我们不就可以完成我们预想的效果了吗？具体操作如下：

app.js

App({
  globalData: {
      ISPLAYING: false, // 播放状态字段
      MUSICID: null // 文章ID字段，初始化为null
  }
})

talk-details.js

onLoad: function (options) {
  let that = this;
   // 检验播放的文章ID是否一致，避免点击其余文章，也出现正在播放状态
  if(app.globalData.MUSICID === that.data.articles.id){
    that.setData({
      isPlaying: app.globalData.ISPLAYING
    })
  }
}
// 对应的我们也应该修改一下操作播放和暂停的方法
onMusic: function(event){
  let that = this;
  let isPlaying = this.data.isPlaying;
  if(!isPlaying){
    that.setData({
      isPlaying: true
    })
    app.globalData.ISPLAYING = true;
    // 将当前文章ID记录在app.js中的全局变量MUSICID中。【唯一改变的地方】
    app.globalData.MUSICID = that.data.articles.id;
    wx.playBackgroundAudio(that.data.articles.music)
  }else{
    that.setData({
      isPlaying: false
    })
    app.globalData.ISPLAYING = false;
    wx.pauseBackgroundAudio();
   }
}

结果：

  最终，我们播放任何一片文章中的音乐，返回上一页后，只有进入对应的音乐的文章中，播放器才是播放状态，其余文章都不是正在播放状态，这就很好的实现了我们想要的结果。

后言

  关于本节课，我们优化了音频播放器的一些小问题，针对这些小问题，我们讲解了app.js，其中app.js中的东西其实并不多，其中还有三个事件，大家没事可以去看看，这里就不多说了。谢谢大家~

项目源码：demigod-liu / douban-movies

说明

原创作品，禁止转载和伪原创，违者必究！