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.
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
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()“.
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:
npm install uni-audio-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)
}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
<!--其他页面内容-->
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.
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!
