Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk berkongsi projek QQ Music to Vue

Bagaimana untuk berkongsi projek QQ Music to Vue

PHPz
Lepaskan: 2023-04-07 10:37:17
asal
751 orang telah melayarinya

Dengan perkembangan Internet dan populariti media sosial, perkongsian dan penyebaran muzik menjadi lebih mudah. Sebagai salah satu platform muzik dalam talian terbesar di China, QQ Music disambut secara meluas oleh pengguna. Walau bagaimanapun, sesetengah pengguna menghadapi masalah apabila menggunakan QQ Music, seperti: cara memajukan QQ Music ke tapak web seperti Vue. Jadi, mari perkenalkan cara berkongsi Muzik QQ kepada Vue.

Pertama sekali, anda perlu memahami premis: Vue ialah rangka kerja pembangunan web berdasarkan JavaScript. Oleh itu, kita perlu menggunakan JavaScript untuk melaksanakan fungsi memajukan muzik QQ ke Vue. Langkah-langkah khusus adalah seperti berikut:

  1. Dapatkan maklumat lagu daripada QQ Music

Dalam JavaScript, kami boleh mendapatkan maklumat lagu, termasuk nama lagu, dengan menghantar permintaan kepada QQ API Muzik , penyanyi, dsb. Berikut ialah kod sampel:

var url = "http://c.y.qq.com/v8/fcg-bin/fcg_v8_singer_track_cp.fcg?g_tk=5381&uin=0&format=jsonp&inCharset=utf-8&outCharset=utf-8¬ice=0&platform=yqq&hostUin=0&needNewCode=0&singermid=001J5f0S2hxw8d&order=listen&begin=0&num=30&songstatus=1";
$.ajax({
    url: url,
    dataType: "jsonp",
    jsonp: "callback",
    success: function (data) {
        console.log(data);
    },
    error: function (error) {
        console.log(error);
    }
});
Salin selepas log masuk

Di sini kami menggunakan kaedah $.ajax jQuery untuk meminta API Muzik QQ melalui jsonp, dan kemudian mengeluarkan hasil permintaan melalui fungsi panggil balik kejayaan. Antaranya, URL mengandungi parameter, seperti singermid mewakili nombor penyanyi, needNewCode mewakili sama ada kod permintaan baharu diperlukan, dsb. Parameter ini perlu diubah suai mengikut situasi sebenar.

  1. Hantar maklumat kepada komponen Vue

Selepas mendapatkan maklumat lagu, kami perlu menghantar maklumat kepada komponen Vue untuk memaparkan maklumat lagu yang berkaitan pada laman web tersebut. Berikut ialah kod sampel:

new Vue({
  el: '#app',
  data: {
    music: {
      title: '',
      singer: '',
      url: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.music.title = 'My heart will go on';
      this.music.singer = 'Celine Dion';
      this.music.url = 'http://stream.qqmusic.qq.com/32164791.mp3';
    })
  }
})
Salin selepas log masuk

Di sini kami mentakrifkan atribut data bernama muzik untuk menyimpan maklumat lagu. Dalam fungsi cangkuk yang dipasang, kami menetapkan nama lagu, penyanyi dan maklumat pautan main balik kepada tajuk, penyanyi dan atribut url muzik masing-masing.

  1. Paparkan maklumat lagu dalam komponen Vue

Langkah terakhir ialah membentangkan maklumat lagu pada halaman web Kami boleh memaparkannya dalam komponen Vue melalui Vue sintaks templat. Berikut ialah kod sampel:

<div id="app">
  <h1>{{music.title}}</h1>
  <h2>{{music.singer}}</h2>
  <audio controls src="{{music.url}}"></audio>
</div>
Salin selepas log masuk

Di sini kami menggunakan sintaks pendakap kerinting berganda untuk memaparkan nama lagu dan artis dalam teg h1 dan h2, dan menggunakan tag audio HTML5 untuk memainkan lagu. Antaranya, atribut src terikat pada atribut url muzik, yang mewakili pautan main balik.

Ringkasnya, memajukan QQ Music ke Vue memerlukan pengetahuan tentang JavaScript, Vue dan QQ Music API. Melalui langkah di atas, fungsi memaparkan lagu QQ Music dalam komponen Vue dapat direalisasikan.

Atas ialah kandungan terperinci Bagaimana untuk berkongsi projek QQ Music to Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan