要在 Uni-app 中实现在所有页面播放音乐,可以通过使用一个全局的音乐播放器,将其保存在状态管理器 Vuex 中,并在需要播放音乐的页面,从状态管理器中获取音乐播放器的实例进行操作。
具体实现步骤如下:
- 在
store目录下创建一个index.js文件来管理全局的音乐播放器。
js
Copy code
const state = {
musicPlayer: null,
}
const mutations = {
setMusicPlayer: (state, musicPlayer) => {
state.musicPlayer = musicPlayer
},
}
const actions = {
createMusicPlayer({ commit }) {
const musicPlayer = uni.createInnerAudioContext()
musicPlayer.autoplay = true
musicPlayer.loop = true
musicPlayer.src = 'http://example.com/music.mp3'
commit('setMusicPlayer', musicPlayer)
},
}
export default {
state,
mutations,
actions,
}
- 在
App.vue文件中,在onLaunch生命周期中调用createMusicPlayer方法来创建全局的音乐播放器对象,并在onShow生命周期中启动播放器。
html
Copy code
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions(['createMusicPlayer']),
},
onLaunch() {
this.createMusicPlayer()
},
onShow() {
if (this.$store.state.musicPlayer) {
this.$store.state.musicPlayer.play()
}
},
}
</script>
- 在需要播放音乐的页面中从全局的音乐播放器中获取播放器实例进行操作,例如,在
home.vue中播放音乐。
html
Copy code
<template>
<div>
Home Page
<button @click="onPlay">Play music</button>
</div>
</template>
<script>
export default {
methods: {
onPlay() {
const musicPlayer = this.$store.state.musicPlayer
musicPlayer.src = 'http://example.com/music.mp3'
musicPlayer.play()
},
},
}
</script>
在上述代码中,我们从状态管理器中获取了全局的音乐播放器实例 musicPlayer,然后设置音频资源的 URL,并调用 play 方法来播放音乐。
通过上述步骤,我们就可以在所有页面中创建和管理一个全局的音乐播放器,实现在任意页面中播放音乐。