手机上唱歌软件太好用了，生活变得有趣多了~那咱们怎么选音乐播放器？谁又离得开听歌不是吗？现代科技发达，大家眼光自然就高，都特喜欢那种有实时推荐的功能。那就让我告诉你做个好的手机音乐播放器，连实时推荐都有，让你听得爽到飞起！
创建Vue项目
试试用Vue CLI来新建个项目！傻瓜模式，一键搞定！想改改？没问题，随意发挥呗！
2.然后赶紧跑进项目文件夹看看去！
获取网易云API
$ vue create music-player $ cd music-player
想要玩转网易云音乐吗？先搞个开发者账号！这个过程里，你会看到一个叫“API密钥”的东西，它其实就是API的小名罢了。API有很多功能，能帮你找到并听到喜欢的歌，看歌词什么的也不在话下。学会了这些技巧，你就能解锁更多网易云音乐的隐藏功能，让你的播放器更炫酷！继续努力
创建组件文件
搞定这里俩文件夹就行了！去src/components找个叫Player.vue和Recommend.vue的小窝。再看看Player.vue，玩儿着咋唱歌？这里曲目情况、播放器应有尽有；至于Recommend.vue，它能推荐好听的歌给你听，发掘更多美妙的音乐。
// src/config.js export const API_KEY = 'your_api_key';
配置路由
先把路由.js塞进src里，然后咱来整导航。这个在vue里挺关键滴，得知道各个路径咋跟组件配对才能跳页跑起来。
// 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文件
搞定了！刚刚把Player.vue和Recommend.vue导入App.vue，然后设个路由就能用上新功能了。开机就能看到这些新的内容，快看看我找到的东西能不能满足你！
修改main.js文件
推荐 播放器export default { name: 'App' }
搞定！直接在主页里加入Vue框架和路径，再把App.vue组件搬进去。这样咱的Vue程序就能运作别忘记加那些小插件或全局样式哟~
编写API请求函数
在网易云音乐上秀个本事，要有点技巧！试试API.js小程序，玩啥都轻松搞定~找歌听歌so easy!试试发个请求,立马就能收上网易云的回复呦！
// 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')
完善组件逻辑
在Player.vue和Recommend.vue两个组件中，咱们还是要保持警惕，一旦看到有啥岔子出来就马上搞定。比如它们开始新循环，挂上钩子，或者一按播放键就开启机器什么的，那咱们就让这些“小朋友”赶紧动起来就是了！
启动开发服务器
// 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暂停歌曲
}
打开电脑运行咱们的服务器，复制屁股指定的网址（例：localhost:8080），粘贴进浏览器地址栏，按个回车呗。页面一跳出来能随便操作了，那说明就大功告成我跟你说，真的很简单耶，对不？
搞定了这个手机音乐播放器是我用Vue框架和网易云牛逼嘀API弄出来的。还加了个超级棒的功能，它会自动挑最火的歌曲放给你听。所以说哪个，用前端框架搭配合适的第三方API，就能做出超有意思的APP，既好玩又好用嗷。
我还用Vue和网易云API做出了一款超酷的音乐播放器，真的超简单又实用的！记住，有这么多强大的工具，我们能做的手机应用简直是无限量的。比如，你可以根据自己的地理位置得到最适合你的歌单；或者利用社交网络，跟朋友们一起来分享好听的歌曲。希望这条信息对你有所启发，让你能用现成的工具打造出让人惊艳的手机应用！
// Player.vue
import { playSong, pauseSong } from '../api.js'
...
methods: {
play() {
playSong(this.currentSong.id).then(url => {
// 播放歌曲
})
},
pause() {
pauseSong(this.currentSong.id).then(() => {
// 暂停歌曲
})
}
}
...
// Recommend.vue
import { fetchRecommendSongs, playSong } from '../api.js'
...
methods: {
playSong(song) {
playSong(song.id).then(url => {
// 播放歌曲
})
},
fetchRecommendSongs() {
fetchRecommendSongs().then(songs => {
this.recommendSongs = songs
})
}
},
...
。
评论0