Wie sorgt Uniapp dafür, dass die Musik beim Seitenwechsel weiter abgespielt wird?

Mit der kontinuierlichen Weiterentwicklung der mobilen Internettechnologie ist APP zu einem unverzichtbaren Bestandteil des Lebens der Menschen geworden und ihre Musikwiedergabefunktion erfreut sich bei den Benutzern noch größerer Beliebtheit. Im heutigen APP-Design haben viele APPs Spezialeffekte hinzugefügt, um beim Seitenwechsel Musik abzuspielen und so das Benutzererlebnis zu verbessern. In diesem Artikel wird am Beispiel von uniapp erläutert, wie die Musikwiedergabe während des Seitenwechsels fortgesetzt werden kann, und es wird die Code-Implementierung erläutert.

1. Hintergrundeinführung

Uniapp ist ein auf Vue.js basierendes Full-End-Entwicklungsframework, das mit einer Reihe von Codes kompiliert werden kann, um Multi-End-Anwendungen wie Applets, H5 und APPs zu generieren. Bei der Entwicklung von Uniapp ist der Seitenwechsel ein häufiger Vorgang und auch ein gutes User-Experience-Design. Um das Benutzererlebnis zu verbessern, können wir schönere Musikeffekte erzeugen, indem wir die Wiedergabe und Pause der Musik beim Seitenwechsel steuern.

2. Lösungsimplementierung

In der Uniapp-Entwicklung können wir die Lebenszyklusfunktion von Vue.js und die von Uni-App bereitgestellten globalen Ereignisse nutzen, um die kontinuierliche Wiedergabe von Musik beim Seitenwechsel zu realisieren.

1. Installation des Global Music Player Plug-Ins

Wir können das Uni-Audio-Player Plug-In über npm oder Yarn installieren, das einen globalen Music Player in der Uni-App-Anwendung bereitstellt und die fortgesetzte Wiedergabe beim Seitenwechsel unterstützt.

npm-Installationsmethode:

npm install uni-audio-player

yarn-Installationsmethode:

yarn add uni-audio-player

2. Seitenkomponente verweist auf den globalen Musikplayer

Referenz uni- in der Seitenkomponente Das Audio-Player-Plug-In übergibt außerdem den Musikressourcen-Link der aktuellen Seite an den globalen Musik-Player in der Lebenszyklusfunktion „page mount()“.

3. Ändern Sie den Musikwiedergabestatus beim Seitenwechsel.

Verwenden Sie vor dem Seitenwechsel das von der Uni-App bereitgestellte globale Ereignis „beforeEnter“, um die Musikwiedergabe auf der aktuellen Seite anzuhalten. Verwenden Sie nach dem Seitenwechsel das globale Ereignis „afterEnter“ von Uni-App. Spielen Sie die Musik erneut.

Das Folgende ist die spezifische Code-Implementierung:

1. Installieren Sie das Uni-Audio-Player-Plug-In.

npm install uni-audio-player.

2. Die Seitenkomponente verweist auf den globalen Musik-Player ;

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

Nach dem Login kopieren

}


In der Komponente erhalten wir eine globale Musikwiedergabe Durch die Einführung eines Plug-In-Players wird der Link zur Musikressource an das Plug-In übergeben, das über die von uni-audio-player bereitgestellte setSrc-Methode implementiert wird.


Musikwiedergabestatus beim Seitenwechsel ändern

3. <script><p> UniAudioPlayer aus '@/components/ importieren uni-audio-player/uni-audio-player.vue'<br> Export-Standard {<br></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Nach dem Login kopieren</div></div> <br>}<br></script>

   In der Seitenkomponente hören wir uns die globalen Ereignisse beforeEnter und afterEnter an, die von uni-app bereitgestellt werden Steuern Sie die Wiedergabe und Pause von Musik. Unter anderem wird das Ereignis beforeEnter ausgelöst, bevor die Seite gewechselt wird. Wir ermitteln, ob die Musik abgespielt wird, und rufen die Methode pause() auf, um die Musik anzuhalten. Das AfterEnter-Ereignis wird nach dem Seitenwechsel ausgelöst. Wir ermitteln, ob die Musik angehalten ist, und rufen die Methode play() auf, um die Musik abzuspielen.
   

   3. Zusammenfassung
   Durch die Einführung und Code-Implementierung dieses Artikels können wir feststellen, dass in der Uniapp-Entwicklung das Abspielen von Musik beim Seitenwechsel nicht nur das Benutzererlebnis verbessern, sondern auch die Anwendungsfunktionen vollständiger machen kann. Durch die Lebenszyklusfunktion von Vue.js und die von uni-app bereitgestellten globalen Ereignisse können wir diese Funktion schnell implementieren. In konkreten Projekten kann der Einsatz dieser Technologie den Benutzern auch die Erzielung besserer visueller und akustischer Effekte ermöglichen.

Das obige ist der detaillierte Inhalt vonWie sorgt Uniapp dafür, dass die Musik beim Seitenwechsel weiter abgespielt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!