小程序开发问题

前段时间没事想把公司一个点读应用实现一个小程序版本，只实现最基本的点和读功能，其它功能暂时不实现，为什么不全实现？（要全实现了，人家还买你家平板干什么？其实是全实现工作量太多了），开发过程遇到几个比较蛋疼的问题，最后也不知道是解决了还是没解决，问题如下：

---

1. canvas和swiper问题
2. InnerAudioContext连续播放多个音频自动pause问题

---

1. canvas和swiper问题

点读数据是由一张图片和一串json数据构成的，json存放的是当前图片可点击区域和坐标和对应的音频（中、英文，还有其它测试和讲解数据），可点击区域大概有如下几种：

  1. 矩形
  2. 椭圆
  3. 不规则图形

下图（web版的）是矩形和不规则图形的，椭圆的懒的找了

矩形

不规则图形

要是只是矩形和椭圆还好，可以用纯属DOM实现，但多了个不规则图形，这个DOM实现不了，只能用canvas实现了，因为事先点读已经实现过web版了，我以为只是简单移植下代码就可以了，结果我还是太年轻了，web版用了一个pixi这个库，小程序的canvas微信封装了一下，本来想自已改下pixi的库兼容下的，结果不知道怎么没有改下去了，估计还是自己太水了吧，算了，我们还是老实自己实现吧。

实现了单页的点读，那么怎么翻页呢，看了下小程序文档，嗯，可以用swiper，套上，我翻？我去什么鬼，怎么没反应，重复几次，还是一样，代码确认再三，没有写错，翻下文档

image.png

这是其中一个问题，另外一个问题是，章节信息从左边弹出来，因为有canvas这个原生组件，章节信息会被canvas挡住，问题出现了，总要想办法解决

canvas默认隐藏，swiper显示点读图片列表，给图片添加点击事件，点击的时候判断下该区域有没有音频文件，如果有就显示canvas并绘制区域、播放音频，没有就不处理，如果canvas显示了，再有点击事件就提示点读状态下不能切换页面，因为canvas是顶级对象，swiper那些都被覆盖住了，用不了了，暂时只能这样处理了。

---

2. InnerAudioContext连续播放多个音频自动pause问题

我们的小程序有点读和整读两个功能，整读就是把当前页的所有音频连续播放一遍，一开始用微信开发者工具开发测试，音频可以正常播放完，推到体验版后，IOS正常，android的手机，一定概率会出现，读到某个音频的时候不往下播放了，后来在audio对象的onEnded，onPause事件打印了一些日志，发现是在pause这里停住了，我是监听audio的onEnded事件来播放下一个音频的，下图是音频不自动往下播的截图，我故意在onPause回调里面调用了一个不存在的方法，是为了打印下堆栈信息给微信提bug，上面红色的椭圆是当时被pause音频对应的区域，微信社区提了这个问题，没什么软用，叫我整个代码片断，懒的写了，写了也不一定能复现

image.png

 this.audio.onPause(e => {
      this.audio.stop()
      setTimeout(() => {
         this.audio.play()
      }, 200)
    })

最后只能在onPause里面手动调用一下stop函数，在200ms后再次播放这个音频，为什么不是马上播放呢，测试的时候，发现有时候会进入pause循环，冒似这样处理下，暂时没有出现那些问题了

---

也不知道上面两个问题最后是解决了还是没解决