微信小程序：音频悬浮、隐藏、中断播放的逻辑处理，音频播放的bug

问题：小程序悬浮时，工程文件的音频不能够持续播放。重新显示程序界面，此时的页面显示仍旧是播放样式（应该是暂停样式），故而需要对其做个处理。

1.从加载逻辑入手刷新

• 小程序目前不提供悬浮事件监听函数，故而需要自行处理。

分析加载逻辑：

1. 初次加载顺序：
   1. App onLaunch()
   2. App onShow()
   3. Page onShow()
2. 页面悬浮，或者切换到其他App，或者黑屏，导致页面隐藏：
   1. Page onHide()
   2. App onHide()
3. 重新恢复到小程序界面：
   1. App onShow()
   2. Page onShow()

问题解决逻辑：

• 无法实现实时解决页面刷新：我们无法直接获知现在page隐藏是由于：
  • 悬浮、切换APP、黑屏（不知道）
  • 切换到了其他page（不知道）

所以，我们无法及时去刷新控制音频的显示部分。故而，我们需要在再次显示的时候，把由于悬浮等问题导致的页面在page onShow的时候进行更新，保持用户感知一致。

解决思路：

• 所以，需要对小程序整体App onHide-> App onShow时，进行记录，然后在进入Page onShow()时进行页面处理！

==========上面的有点复杂了==========

2. 从onPause进行刷新。经过测试，发现如下情况：

wx.createInnerAudioContext() 的BUG：

• stop()：在真机上会导致onPause()事件的产生。
• 模拟器更是bug很多，.play()在模拟器上也会产生这个问题！

应对方案：

1. 避免使用.stop()[我个人的项目]
2. 再onPause()中处理页面展示

3.真机测试又发现情况：

1.iOS：符合上图。

2.Android：没反应。上述部分，Android不会触发onPause。。。

应对方案，把1的部分加入，在小程序隐藏又显示之后，在page的onShow中进行刷新页面的操作：

1.定义全局flag

globalData: {
  userInfo: null,
  hideflag: 0 //app隐藏标志
},

2.app js onHide处理

onHide:function(){
  console.log("全局页面隐藏");
  this.globalData.hideflag = 1;
  console.log("this.globalData.hideflag:",this.globalData.hideflag);
  //t.test();
},

3.page onShow处理刷新逻辑

onShow: function () {
  console.log("page页面onShow")   
  const app = getApp();
  if(app.globalData.hideflag ==1){
      //页面刷新处理
    console.log("\n全局隐藏后，再次显示，就是暂停界面...") 
    app.globalData.hideflag = 0
  }
},