E企盈营销工具技术服务商 热线:4006-838-530

小程序开发问题

E企盈直播平台营销卖货系统

小编推荐:Fundebug专注于JavaScript、微信小程序、微信小游戏,Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务,众多大佬公司都在使用。前段时间没事想把公司一个点读应用实现一个小程序版本,只实现最基本的点和读功能,其它功能暂时不实现,为什么不全实现?(要全实现了,人家还买你家平板干什么?其实是全实现工作量太多了),开发过程遇到几个比较蛋疼的问题,最后也不知道是解决了还是没解决,问题如下:canvas和swiper问题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循环,冒似这样处理下,暂时没有出现那些问题了作者:smallbb链接:https://www.jianshu.com/p/132baa9680be关于FundebugFundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了9亿+错误事件,得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用!

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序开发问题
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏