Vue项目——手把手教你做出音乐播放器

进入VueMusic—安装所需的东西 cnpm install
之后启动这个项目 npm start

App.vue 设置默认样式

<template><div id="app"><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style>*{margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;font-family:Arial, "微软雅黑";}
img{border:none;max-width:100%;vertical-align:middle;}
body,p,form,input,button,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6{margin:0;padding:0;list-style:none;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-size:100%;}
input,textarea{-webkit-user-select:text;-ms-user-select:text;user-select:text;-webkit-appearance:none;font-size:1em;line-height:1.5em;}
table{border-collapse:collapse;}
input,select,textarea{outline:none;border:none;background:none;}
a{outline:0;cursor:pointer;*star:expression(this.onbanner=this.blur());}
a:link,a:active{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{color:#f00;text-decoration:none;}
a{text-decoration:none;-webkit-touch-callout:none;}
em,i{font-style:normal;}
li,ol{list-style:none;}
html{font-size:16px;}
.clear{clear:both;height:0;font-size:0;line-height:0;visibility:hidden; overflow:hidden;}
.fl{float:left;}
.fr{float:right;}
body{ margin:0 auto;max-width:640px; min-width:320px;color:#555;background:#f1f1f1;height:100%;}
a{color: #222;text-decoration: none}
.router-link-active{color: red !important;}</style>

index.js里引入各路由和配置各路由

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/pages/index'
import Home from "@/pages/home"
import Artists from "@/pages/artists"
import ListCate from "@/pages/listcate"
import Ucenter from "@/pages/ucenter"
import Search from "@/pages/search"
import HotList from "@/pages/musiclist/hot_list"
import KingList from "@/pages/musiclist/king_list"
import NewsList from "@/pages/musiclist/news_list"
import MoreList from "@/pages/morelist"Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Index',redirect:"/home",component: Index,children:[{path:"home",component:Home,redirect:"/home/hot",children:[{path:"hot",component:HotList},{path:"king",component:KingList},{path:"news",component:NewsList}]},{path:"artists",component:Artists},{path:"listcate",component:ListCate},{path:"ucenter",component:Ucenter},{path:"search",component:Search},{path:"more",name:"MoreList",component:MoreList}]}]
})

index.vue设置点击事件router-link to，并设置样式

<template lang="html"><div class="index"><ul><li><router-link to="/home"><img src="../assets/logo-ea5.png" alt=""></router-link></li><li><router-link to="/artists">歌手</router-link></li><li><router-link to="/listcate">榜单</router-link></li><li><router-link to="/ucenter">我的</router-link></li><li><router-link to="/search">搜索</router-link></li></ul><router-view /></div>
</template><script>
export default {}
</script><style scoped>.index img{width: 26px;height: 26px;
}.index ul{display: flex;height: 50px;line-height: 50px;background: #f9f9f9;
}.index ul li {flex: 1;text-align: center;
}.index ul li a{font-size: 16px;color: #999;
}</style>

去组件中components创建一个新的组件–今日推荐

在home.vue里引入组件

import TodayRecommend from "../components/Today_Recommend"
import NewsMusic from "../components/News_Music"
import SwiperBanner from "../components/Swiper_Banner"
import MusicListNav from "./musiclist/music_listnav"

百度音乐api接口

解决跨域问题
config–index.js

 proxyTable: {"/baidu_music_api": {target: "http://tingapi.ting.baidu.com",changeOrigin: true,pathRewrite: {'^/baidu_music_api': ''}}},

在主入口文件src–main.js需要加上：

Vue.prototype.HOST = "/baidu_music_api"

安装axios
cnpm install --save axios

npm start 重新启动

获取网络请求数据

Today_Recommend.vue

<template lang="html"><div class="mod-albums"><div class="hd log url"><h2>{{title}}</h2><router-link :to="{ name:'MoreList',params:{musictype:this.type,title:title}}" tag="div">更多</router-link></div><div class="container"><div class="gallery"><div class="scroller"><div class="card url" v-for="(item,index) in todayRecommend" :key="index"><div class="album"><img :src="item.pic_big" :alt="item.title"><div class="name">{{ item.title }}</div></div></div></div></div></div></div>
</template>

完成新歌速递，和今日推荐差不多，稍作修改

<template lang="html"><div class="mod-albums"><div class="hd log url"><h2>新歌速递</h2><div>更多</div></div><div class="container"><div class="gallery"><div class="scroller"><div class="card url" v-for="(item,index) in newsMusic" :key="index"><div class="album"><img :src="item.pic_big" :alt="item.title"><div class="name">{{ item.title }}</div><div class="author">{{ item.artist_name }}</div></div></div></div></div></div></div>
</template><script>
export default {name:"newsMusic",data(){return{newsMusic:[]}},mounted(){var url = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type=2&size=3&offset=0";this.$axios.get(url).then(res => {this.newsMusic = res.data.song_list}).catch(error => {console.log(error);})}
}
</script><style scoped>.mod-albums {background-color: #fff;padding: 10px 17px;margin-top: 10px;
}.hd {display: flex;margin: 14px 0 18px 0;
}.hd h2 {-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;margin: 0;padding: 0;font-size: 20px;
}.hd div {width: 64px;font-size: 12px;text-align: right;
}.mod-albums .gallery {overflow: hidden;margin: 0 -5px;
}.mod-albums .gallery .card {width: 33.3%;float: left;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 5px 10px;
}.mod-albums .gallery .card .album {position: relative;
}.mod-albums .gallery .card img {width: 100%;height: auto;border: 1px solid #eee;
}.mod-albums .gallery .card .name {font-size: 12px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-top: 4px;line-height: 14px;max-height: 28px;margin-bottom: 2px;
}.mod-albums .gallery .card .author {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #999;font-size: 12px;line-height: 12px;
}</style>

轮播图的数据，接口中没有

安装轮播图 cnpm install --save vue-awesome-swiper

创建一个新组件：Swiper_Banner.vue

使用局部引入

<template lang="html"><div class="banner"><swiper :options="swiperOption"><swiper-slide><img src="../assets/img/b1.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/img/b2.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/img/b3.jpg" alt=""></swiper-slide><div class="swiper-pagination"  slot="pagination"></div></swiper></div>
</template><script>import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'export default {data(){return{swiperOption:{pagination: {el: '.swiper-pagination',},autoplay:true}}},components: {swiper,swiperSlide}
}
</script><style scoped>.banner{padding: 10px;
}</style>

轮播图官方
查询使用方法
api文档–分页器

在home.vue引入组件

音乐榜单（多级路由的嵌套，公共组件的实现和传递参数）
创建音乐列表文件夹musiclist，存放3个榜单页面
在music_listnav.vue中写三个组件的导航
在路由index.js引入这三个页面的路由
并重定向热歌榜，默认加载第一个

在home.vue写上router-view

创建公共组件Music_List.vue

mounted做网络请求

keep-alive缓存

更多数据适配
更多点击后是一个页面，所以在新建一个页面
在index.js引入路由

Vue项目——手把手教你做出音乐播放器相关推荐

iOS开发--手把手教你制作音乐播放器
我个人之前有个想法,把平常用的小软件,闲暇之余自己都实现一个迷你版本,打造自己的app专属文件夹,比如闹钟.音乐播放器.视频播放器.电子书以及贪吃蛇之类的小游戏.我相信通过实现这些小程序,能够进一步熟 ...
手把手教你做音乐播放器（八）桌面小工具（上）
第8节桌面小工具桌面小工具是可以放置在主界面的.快速控制应用的小助手.例如我们的音乐小工具,它可以帮助用户在桌面上就完成音乐的暂停.播放.切换等操作,而不需要启动应用本身. 在安卓系统中,我们也常 ...
手把手教你做音乐播放器（四）播放服务的搭建
第4节播放服务的搭建播放音乐的服务-MusicService是整改音乐播放器的核心,它将播放界面和实际的播放功能连接在一起. 4.1 MusicService的接口它对外要提供两类主要的功能,播 ...
手把手教你做音乐播放器（一）功能规划
前言学习完"计算器" "视频播放器" "蓝牙聊天"以后,对安卓应用的开发我们基本上就入门70%了. 现在,我们将在之前学习的基础上,进一步 ...
手把手教你做音乐播放器（八）桌面小工具（下）（完）
8.4 MusicService的改造 8.4.1 App widget触发MusicService 当App widget的按钮被点击后,会触发隐式定义的Intent发送给MusicService. ...
手把手教你做音乐播放器（五）音乐列表的存储（上）
第5节播放列表的存取关于播放列表的存取需要三个组件的协同配合, MusicListActivity:让用户选择多首或一首音乐,将用户的选择项,传递给MusicService: MusicServi ...
手把手教你做音乐播放器（七）播放音乐（上）
第7节播放音乐音乐播放列表也准备好了,我们来播放音乐吧.完成后效果如下, 实现音乐的播放,我们需要播放界面和音乐服务两个方面的合作. 7.1 MusicService 前面我们已经为播放音乐的功能 ...
手把手教你做音乐播放器（三）获取音乐信息
第3节获取音乐信息在"视频播放器"的开发过程当中,我们已经学会了如何获取视频文件的信息: 定义一个视频信息的数据结构VideoItem: 自定义一个AnsycTask,在它的工 ...
Vue介绍以及练手案例——音乐播放器（搜索音乐、听歌、看评论、看mv等）（持续更新）
Vue概述它是一种 javascript框架可以简化DOM操作进行响应式数据驱动 el: 挂载点 vue实例的作用范围:vue会管理 el 选项所命中的元素及其内部的后代元素. 可以使用其他选择 ...

Vue项目——手把手教你做出音乐播放器

Vue项目——手把手教你做出音乐播放器相关推荐

最新文章

热门文章