解决小程序音频自定义组件不同时播放问题

  1. 需求
  2. 分析
  3. 解决方案
  4. 总结

需求

首先是一个播放的气泡,点击播放src音频,但是是一组列表,有许多这样的气泡,点其中一个播放后,再点其他的,前一个要停止播放。

分析

这种其实是很好实现的,如果是直接写的话。但是现在用上了小程序的自定义组件,每个组件都是独立的没有联系,唯一的联系是父组件,这个时候,我们该怎么办呢。

解决方案

由于涉及保密协议,就不上代码,说说思路。

思路:

  1. 用广播,如果该组件播放时,就发出一个广播,让其他组件关闭播放。

这里知识用到观察者模式(订阅与发布),具体怎么实现,有很多方式,本项目中的实现是我的师父写的,然而他写的有个地方有问题,他用了Promise处理监听的回调,然而Promise resolve以后,它的生命就到此为止了(个人目前的理解是这样的,如有勘误,请务必指出),所以只能执行一次回调,而不能多次监听,触发回调。我把这里改了,实现了一次监听,有触发随时执行。

  1. 关键问题,我怎么样只广播非当前播放的气泡呢。设一个属性,每次给一个变化的值进去,利用observer确定是当前组件,当前组件执行一个逻辑,这个逻辑就是避免被广播到

总结

程序出不来,大部分是代码原因,继续搞,继续搞就能看到光明。

我的每篇文章都不长,但都可以说明一个问题,欢迎阅读。

-————–update分割线 —————–

最佳实践是这样的:

前端工作遇到的小知识点第14点,最好放在父组件中控制,上面操作太骚,而且后期处理起来不易维护


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 jaytp@qq.com

×

喜欢就点赞,疼爱就打赏