Dengan pembangunan berterusan teknologi Internet mudah alih, APP telah menjadi bahagian yang amat diperlukan dalam kehidupan orang ramai, dan fungsi main balik muziknya lebih disukai oleh pengguna. Dalam reka bentuk APP hari ini, banyak APP telah menambah kesan khas untuk memainkan muzik apabila menukar halaman untuk meningkatkan pengalaman pengguna. Artikel ini akan mengambil uniapp sebagai contoh untuk membincangkan cara mengekalkan muzik semasa penukaran halaman dan memberikan pelaksanaan kod.
1. Pengenalan latar belakang
Uniapp ialah rangka kerja pembangunan penuh berdasarkan Vue.js, yang boleh disusun dengan set kod untuk menjana aplikasi berbilang hujung seperti applet, H5 , dan APP. Dalam pembangunan Uniapp, penukaran halaman adalah operasi biasa dan juga merupakan reka bentuk pengalaman pengguna yang baik. Untuk meningkatkan pengalaman pengguna, kami boleh mencipta kesan muzik yang lebih cantik dengan mengawal mainan dan jeda muzik apabila menukar halaman.
2. Pelaksanaan penyelesaian
Dalam pembangunan Uniapp, kita boleh menggunakan fungsi kitaran hayat Vue.js dan acara global yang disediakan oleh uni-app untuk merealisasikan main balik muzik yang berterusan apabila menukar halaman . Langkah-langkah khusus adalah seperti berikut:
Kami boleh memasang pemalam uni-audio-player melalui npm atau benang , yang boleh digunakan dalam apl uni Pemain muzik global disediakan dan menyokong main balik berterusan apabila menukar halaman.
kaedah pemasangan npm:
npm pasang uni-audio-player
kaedah pemasangan benang:
benang tambah uni-audio-player
Merujuk pemalam uni-audio-player dalam komponen halaman dan memautkan sumber muzik halaman semasa dalam halaman yang dipasang () fungsi kitaran hayat Lulus pemain muzik global.
Sebelum menukar halaman, gunakan acara global beforeEnter yang disediakan oleh uni-app untuk menjeda main semula muzik pada halaman semasa ; selepas menukar halaman Akhir sekali, mainkan muzik semula melalui acara global afterEnter yang disediakan oleh uni-app.
Berikut ialah pelaksanaan kod khusus:
npm install uni-audio-player
<uni-audio-player ref="audio" :src="musicSrc" autoplay></uni-audio-player> <!--其他页面内容-->
< /template>
eksport lalai {
data() {
return {
musicSrc: '音乐链接'
}
},
mounted() {
this.$refs.audio.setSrc(this.musicSrc)
}}
Dalam komponen, kami memperkenalkan pemalam Dapatkan pemain muzik global dan hantar pautan sumber muzik ke pemalam melalui kaedah setSrc yang disediakan oleh pemain audio uni.
<!--其他页面内容-->
import UniAudioPlayer daripada '@/components/uni-audio-player/uni-audio-player.vue'
eksport lalai {
mounted() {
uni.$on('beforeEnter', this.beforeEnter)
uni.$on('afterEnter', this.afterEnter)
},
methods: {
beforeEnter(to, from) {
const audioComp = UniAudioPlayer.audioComp
if (audioComp && !audioComp.paused && !audioComp.ended) {
audioComp.pause()
}
},
afterEnter(to, from) {
const audioComp = UniAudioPlayer.audioComp
if (audioComp && audioComp.paused) {
audioComp.play()
}
}
},
destroyed() {
uni.$off('beforeEnter', this.beforeEnter)
uni.$off('afterEnter', this.afterEnter)
}}
Dalam komponen halaman, kami mengawal main semula dan jeda muzik dengan mendengar acara global beforeEnter dan afterEnter yang disediakan oleh uni-app. Antaranya, acara beforeEnter akan dicetuskan sebelum halaman ditukar. Kami menentukan sama ada muzik sedang dimainkan dan memanggil kaedah jeda() untuk menjeda muzik. Acara afterEnter akan dicetuskan selepas halaman ditukar Kami menentukan sama ada muzik dijeda dan memanggil kaedah main() untuk memainkan muzik.
3. Ringkasan
Melalui pengenalan dan pelaksanaan kod artikel ini, kita dapati bahawa dalam pembangunan uniapp, memainkan muzik semasa menukar halaman bukan sahaja dapat meningkatkan pengalaman pengguna, tetapi juga meningkatkan aplikasi fungsi lebih lengkap. Melalui fungsi kitaran hayat Vue.js dan acara global yang disediakan oleh uni-app, kami boleh melaksanakan fungsi ini dengan cepat. Dalam projek sebenar, menggunakan teknologi ini juga boleh membolehkan pengguna menghasilkan kesan visual dan pendengaran yang lebih baik.
Atas ialah kandungan terperinci Bagaimanakah uniapp mengekalkan muzik dimainkan semasa penukaran halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
