uni-app uni.getBackgroundAudioManager() 重复执行
uni-app uni.getBackgroundAudioManager() 重复执行
| 项目属性 | 详细信息 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | 11 |
| HBuilderX类型 | Alpha |
| HBuilderX版本号 | 3.8.12 |
| 手机系统 | iOS |
| 手机系统版本号 | iOS 15 |
| 手机厂商 | 苹果 |
| 手机机型 | 苹果11 |
| 页面类型 | vue |
| vue版本 | vue2 |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
示例代码：
<template>
<view class="l">
<button @click="one">播放列表1</button>
</view>
</template>
<script>
let bgAudioManager =uni.getBackgroundAudioManager()
import {one,tow} from "../../utils/ceshi.js"
export default {
data() {
return {
list1:[],
list2:[]
}
},
onLoad() {
this.list1=one
this.list2=tow
bgAudioManager.onError((err)=>{
console.log('播放错误')
})
bgAudioManager.onEnded((res)=>{
console.log('播放停止')
})
bgAudioManager.onPlay((res)=>{
console.log('开始播放')
})
},
onShow() {
console.log('ffff')
},
onUnload() {
bgAudioManager.stop()
},
methods: {
one(){
// console.log(this.list1[0])
bgAudioManager.title = '致爱丽丝';
bgAudioManager.singer = '暂无';
bgAudioManager.coverImgUrl = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png';
bgAudioManager.src = this.list1[0].message.msg_info.tempFilePath;
bgAudioManager.play()
},
}
}
</script> 操作步骤：
正常操作
预期结果：
不出问题
实际结果：
方法执行了多次
bug描述：
uni.getBackgroundAudioManager() 背景音频播放器，第一次播放时onPlay走了两遍，然后返回上一页，再进来播放 onPlay执行次数会在原有的基础上加1，不光是onPlay事件这样，详情看附件吗，全部代码贴在下面了
7 回复
在 uni-app 中使用 uni.getBackgroundAudioManager() 时，如果你发现该方法重复执行，可能是由于以下几个原因导致的。你可以根据具体情况进行排查和解决：
1. 多次调用 uni.getBackgroundAudioManager()
uni.getBackgroundAudioManager()返回的是一个单例对象，多次调用并不会创建多个实例，而是返回同一个实例。- 如果你在代码中多次调用
uni.getBackgroundAudioManager()，可能会导致某些事件监听器重复绑定，从而引发重复执行的问题。
解决方案：
- 确保
uni.getBackgroundAudioManager()只在需要的地方调用一次，并将其保存到一个变量中，后续直接使用该变量。
const backgroundAudioManager = uni.getBackgroundAudioManager();
// 后续操作直接使用 backgroundAudioManager
backgroundAudioManager.title = 'My Audio';
backgroundAudioManager.src = 'https://example.com/audio.mp3';2. 事件监听器重复绑定
- 如果你在组件的生命周期钩子（如
onLoad、onShow）中多次绑定事件监听器，可能会导致事件处理函数被多次调用。
解决方案：
- 确保事件监听器只绑定一次。可以在组件的
onLoad或onReady中绑定事件监听器，并在onUnload中移除。
export default {
onLoad() {
const backgroundAudioManager = uni.getBackgroundAudioManager();
backgroundAudioManager.onPlay(() => {
console.log('Audio started playing');
});
},
onUnload() {
const backgroundAudioManager = uni.getBackgroundAudioManager();
backgroundAudioManager.offPlay(); // 移除事件监听器
}
};3. 组件重复渲染
- 如果你的组件在渲染过程中多次触发
uni.getBackgroundAudioManager()，可能会导致重复执行。
解决方案：
- 确保
uni.getBackgroundAudioManager()只在组件的初始化阶段调用一次，避免在渲染过程中重复调用。
4. 全局状态管理
- 如果你在多个组件中使用
uni.getBackgroundAudioManager()，并且这些组件之间存在状态共享，可能会导致重复执行。
解决方案：
- 使用 Vuex 或其他状态管理工具来管理
backgroundAudioManager的状态，确保全局只有一个实例。
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
backgroundAudioManager: null
},
mutations: {
setBackgroundAudioManager(state, manager) {
state.backgroundAudioManager = manager;
}
},
actions: {
initBackgroundAudioManager({ commit }) {
const manager = uni.getBackgroundAudioManager();
commit('setBackgroundAudioManager', manager);
}
}
});
// 在组件中使用
export default {
onLoad() {
this.$store.dispatch('initBackgroundAudioManager');
const manager = this.$store.state.backgroundAudioManager;
manager.title = 'My Audio';
manager.src = 'https://example.com/audio.mp3';
}
};5. 调试和日志
- 如果问题依然存在，可以通过添加调试日志来跟踪
uni.getBackgroundAudioManager()的调用和执行情况，帮助你更好地定位问题。
console.log('Getting background audio manager');
const backgroundAudioManager = uni.getBackgroundAudioManager();
console.log('Background audio manager:', backgroundAudioManager);