Bagaimana untuk berkongsi projek QQ Music to Vue

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);
    }
});

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.

2. 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';
    })
  }
})

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.

3. 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>

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!