引言：
在移动互联网时代，音乐播放器已经成为人们日常生活中必不可少的娱乐工具。而实时推荐功能则能够让用户更加方便地发现自己感兴趣的歌曲，提升用户体验。本文将通过Vue框架和网易云API来实现一个移动端音乐播放器，并添加实时推荐功能。
- 准备工作
在开始之前，需要确保你已经安装好了Vue框架，并注册了网易云开放平台的开发者账号，获取API的密钥。 - 创建Vue项目
通过vue-cli工具创建一个新的Vue项目，并进入项目目录。
$ vue create music-player $ cd music-player
- 获取网易云API
在src目录下创建一个config.js文件，并将你的网易云API密钥填入。
// src/config.js export const API_KEY = 'your_api_key';
- 创建组件
在src/components目录下创建Player.vue和Recommend.vue两个组件文件。
-
Player.vue: 播放器组件，用于展示当前正在播放的歌曲信息，以及播放控制按钮。
<template> <div> <h1>{{ currentSong.name }}</h1> <button @click="play">播放</button> <button @click="pause">暂停</button> </div> </template> <script> export default { data() { return { currentSong: {} } }, methods: { play() { // 调用网易云API播放歌曲 }, pause() { // 调用网易云API暂停歌曲 } } } </script> <style scoped> h1 { font-size: 24px; } </style> -
Recommend.vue: 推荐组件，用于展示实时推荐的歌曲列表。
<template> <div> <ul> <li v-for="song in recommendSongs" :key="song.id" @click="playSong(song)">{{ song.name }}</li> </ul> </div> </template> <script> export default { data() { return { recommendSongs: [] } }, methods: { playSong(song) { // 调用网易云API播放歌曲 }, fetchRecommendSongs() { // 调用网易云API获取实时推荐歌曲列表 } }, created() { this.fetchRecommendSongs(); } } </script> <style scoped> ul { list-style-type: none; padding: 0; } li { font-size: 16px; margin-bottom: 10px; cursor: pointer; } </style>
- 配置路由
在src目录下创建一个router.js文件，配置路由。
// src/router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Player from './components/Player.vue'
import Recommend from './components/Recommend.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Recommend },
{ path: '/player', component: Player }
]
const router = new VueRouter({
routes
})
export default router- 修改App.vue文件
在src目录下的App.vue文件中引入刚才创建的两个组件，并配置路由。
<template>
<div id="app">
<router-link to="/">推荐</router-link>
<router-link to="/player">播放器</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>- 修改main.js文件
在src目录下的main.js文件中引入Vue框架和路由，以及配置的组件和路由。
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')- 编写API请求函数
在src目录下的api.js文件中编写与网易云API交互的请求函数。
// src/api.js
import axios from 'axios'
import { API_KEY } from './config.js'
// 获取实时推荐歌曲列表
export function fetchRecommendSongs() {
return axios.get(`http://musicapi.leanapp.cn/personalized/newsong?limit=10`)
.then(response => response.data.result)
}
// 播放歌曲
export function playSong(songId) {
return axios.get(`http://musicapi.leanapp.cn/song/url?id=${songId}`)
.then(response => response.data.data[0].url)
}
// 暂停歌曲
export function pauseSong(songId) {
// 调用相关API暂停歌曲
}- 完善组件逻辑
在Player.vue和Recommend.vue组件中引入之前编写的API请求函数，并在相应的方法中调用API。
// Player.vue
<script>
import { playSong, pauseSong } from '../api.js'
...
methods: {
play() {
playSong(this.currentSong.id).then(url => {
// 播放歌曲
})
},
pause() {
pauseSong(this.currentSong.id).then(() => {
// 暂停歌曲
})
}
}
...
</script>
// Recommend.vue
<script>
import { fetchRecommendSongs, playSong } from '../api.js'
...
methods: {
playSong(song) {
playSong(song.id).then(url => {
// 播放歌曲
})
},
fetchRecommendSongs() {
fetchRecommendSongs().then(songs => {
this.recommendSongs = songs
})
}
},
...
</script>- 运行项目
确保在项目根目录下运行以下命令启动开发服务器。
$ npm run serve
在浏览器中访问http://localhost:8080，你将能够看到一个简单的音乐播放器页面和实时推荐歌曲列表。
立即学习“前端免费学习笔记（深入）”；
总结：
通过Vue框架和网易云API，我们成功实现了一个移动端音乐播放器，并添加了实时推荐功能。这个简单的示例展示了如何使用Vue和API进行数据交互，希望能够帮助你理解如何在移动端开发中结合实时推荐功能，提升用户体验。
