小程序开发问题

ゞ浴缸里的玫瑰 2022-04-02 16:12 245阅读 0赞

> **小编推荐：**[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

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

--------------------

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

--------------------

## 1. canvas和swiper问题 ##

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

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

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

![Image 1][]

矩形

![Image 1][]

不规则图形

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

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

![Image 1][]

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 1][]

image.png

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

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

作者：smallbb  
链接：https://www.jianshu.com/p/132baa9680be

### 关于Fundebug ###

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件，得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！

[![2018121912254161][]][2018121912254161]

[Fundebug]: https://www.fundebug.com/
[Image 1]: 
[2018121912254161]: /images/20220402/cf3db38c7bdc4669830367de95252501.png