Comment Uniapp continue-t-il à jouer de la musique pendant le changement de page ?

Avec le développement continu de la technologie Internet mobile, APP est devenue un élément indispensable dans la vie des gens et sa fonction de lecture de musique est encore plus appréciée des utilisateurs. Dans la conception actuelle des applications, de nombreuses applications ont ajouté des effets spéciaux pour lire de la musique lors du changement de page afin d'améliorer l'expérience utilisateur. Cet article prendra uniapp comme exemple pour expliquer comment continuer à jouer de la musique pendant le changement de page et donner l'implémentation du code.

1. Introduction générale

Uniapp est un framework de développement complet basé sur Vue.js. Il peut compiler et générer des applications multi-extrémités telles que des petits programmes, H5 et des applications avec un ensemble de codes. Dans le développement d'Uniapp, le changement de page est une opération courante et constitue également une bonne conception de l'expérience utilisateur. Afin d'améliorer l'expérience utilisateur, nous pouvons créer de plus beaux effets musicaux en contrôlant la lecture et la pause de la musique lors du changement de page.

2. Implémentation de la solution

Dans le développement d'Uniapp, nous pouvons utiliser la fonction de cycle de vie de Vue.js et les événements globaux fournis par uni-app pour réaliser la lecture continue de la musique lors du changement de page.

1. Installation du plug-in du lecteur de musique global

Nous pouvons installer le plug-in uni-audio-player via npm ou Yarn, qui fournit un lecteur de musique global dans l'application uni-app et prend en charge la lecture continue lorsque la page est commuté.

Méthode d'installation npm :

npm install uni-audio-player

Méthode d'installation de yarn :

yarn add uni-audio-player

2. Le composant de page fait référence au lecteur de musique global

Référence uni- dans le composant de page Le plug-in du lecteur audio transmet également le lien de ressource musicale de la page actuelle au lecteur de musique global dans la fonction de cycle de vie page Mounted().

3. Modifier l'état de lecture de la musique lors du changement de page

Avant de changer de page, utilisez l'événement global beforeEnter fourni par uni-app pour mettre en pause la lecture de la musique sur la page actuelle après avoir changé de page, utilisez l'événement global afterEnter fourni par ; uni-app. Jouez à nouveau la musique.

Ce qui suit est l'implémentation spécifique du code :

1. Installez le plug-in uni-audio-player

npm install uni-audio-player

2. Le composant de page fait référence au lecteur de musique global

<uni-audio-player ref="audio" :src="musicSrc" autoplay></uni-audio-player>
<!--其他页面内容--></p>
<p></view><br></template><br><script><br> export default {</p>
<pre class="brush:php;toolbar:false">data() {
  return {
    musicSrc: '音乐链接'
  }
},
mounted() {
  this.$refs.audio.setSrc(this.musicSrc)
}

}

Dans le composant, on obtient une lecture globale de la musique en introduisant un lecteur de plug-in, et transmettez le lien de ressource musicale au plug-in, qui est implémenté via la méthode setSrc fournie par uni-audio-player.

3. Modifier l'état de lecture de la musique lors du changement de page

<script><br> importer UniAudioPlayer depuis '@/components/ uni-audio-player/uni-audio-player.vue'<br> export default {</p> <pre class="brush:php;toolbar:false">mounted() {   uni.$on('beforeEnter', this.beforeEnter)   uni.$on('afterEnter', this.afterEnter) }, methods: {   beforeEnter(to, from) {     const audioComp = UniAudioPlayer.audioComp     if (audioComp &amp;&amp; !audioComp.paused &amp;&amp; !audioComp.ended) {       audioComp.pause()     }   },   afterEnter(to, from) {     const audioComp = UniAudioPlayer.audioComp     if (audioComp &amp;&amp; audioComp.paused) {       audioComp.play()     }   } }, destroyed() {   uni.$off('beforeEnter', this.beforeEnter)   uni.$off('afterEnter', this.afterEnter) }</pre> <p>}<br></script>

Dans le composant page, nous écoutons les événements globaux beforeEnter et afterEnter fournis par uni-app pour Contrôlez la lecture et la pause de la musique. Parmi eux, l'événement beforeEnter sera déclenché avant le changement de page. Nous déterminons si la musique est en cours de lecture et appelons la méthode pause() pour mettre la musique en pause. L'événement afterEnter sera déclenché après le changement de page. Nous déterminons si la musique est en pause et appelons la méthode play() pour lire la musique.

3. Résumé

Grâce à l'introduction et à l'implémentation du code de cet article, nous pouvons constater que dans le développement d'uniapp, jouer de la musique lors du changement de page peut non seulement améliorer l'expérience utilisateur, mais également rendre les fonctions de l'application plus complètes. Grâce à la fonction de cycle de vie de Vue.js et aux événements globaux fournis par uni-app, nous pouvons rapidement implémenter cette fonction. Dans des projets réels, l'application de cette technologie peut également permettre aux utilisateurs de produire de meilleurs effets visuels et auditifs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!