Net Music

https://github.com/ITch8/NetMusic

模仿QQ音乐wap端

实践中来学习Vue技术栈开发

效果图

体验

开发

技术栈

Vue + VueRouter + vuex + webpack + stylus + VueLazyload

views

首页推荐
歌手列表
歌曲排行榜
搜索页面
歌手详情页
电台详情页
排行榜详情页
音乐播放器

功能

查看推荐歌单
歌手排行
播放歌曲列表（随机播放、单曲循环、顺序播放）
歌曲排行榜

公用组件

Scroll
Slider(轮播图)
SongList(歌曲列表)
ProgressBar(进度条)
player

总结

知识点

1.抽象代码，自定义公用组件及做好组件复用
2.vuex来管理播放器播放状态及播放内容

const state = {singer:{},playing:false,fullScreen:false,playlist:[],sequenceList:[],mode:playMode.squence,currentIndex:-1
}

3.开发模式下使用webpack的devServe.proxy来实现跨域请求，抓取QQ音乐官网数据

//例如 获取歌手列表//代理配置
'/api/getSingers':{target:'https://u.y.qq.com/cgi-bin/musicu.fcg',changeOrigin: true,bypass:function(req,res,proxyOptions){req.headers.referer='https://u.y.qq.com'req.headers.host='u.y.qq.com'},pathRewrite:{'^/api/getSingers':''}}
//请求
export function getSingerList() {const url = '/api/getSingers'const pdata = {g_tk: 5381,loginUin: 0,hostUin: 0,format: 'json',inCharset: 'utf8',outCharset: 'utf-8',notice: 0,platform: 'yqq.json',needNewCode: 0,data:JSON.stringify({"comm":{"ct":24,"cv":0},"singerList":{"module":"Music.SingerListServer","method":"get_singer_list","param":{"area":-100,"sex":-100,"genre":-100,"index":-100,"sin":0,"cur_page":1}}})}return   axios.get(url,{params:pdata}).then((res)=>{return Promise.resolve(res.data)}).catch((err)=>{console.log(err);})
}

4.使用混入 (mixins) 解决底部播放器出现时页面底部元素被遮盖问题

import {mapGetters} from 'vuex'
export const playListMixin = {computed:{...mapGetters(['playlist'])
},
mounted(){this.handlePlayList(this.playlist)
},
activated(){this.handlePlayList(this.playlist)
},
watch:{playlist(newVal){this.handlePlayList(newVal)}
},
methods:{handlePlayList(){throw new Error('components must implement handlePlayList function')}
}

5.页面样式仿QQ音乐wap端，copy Style，更多注意力放在了功能开发上了
6.歌词解析及播放是使用 lyric-parser  （去install lyric-parser即可，感谢其作者）

问题记录

注意BetterScroll初始化时机。dom渲染完成之后，bscroll对父子容器高度进行计算
activated在keep-alive 组件激活时调用，来解决路由跳转新的组件，重新加载数据（而不是挂载在mounted上面)
QQ音乐的数据接口会一直在变动，若是接口访问错误要重新去QQ音乐官网抓取

使用

安装

 npm install

开发运行

npm run dev

TODO

完善搜索页面功能
添加播放列表管理页面
优化

模仿QQ音乐wap端相关推荐

iOS之基于FreeStreamer的简单音乐播放器(模仿QQ音乐)
代码地址如下: http://www.demodashi.com/demo/11944.html 天道酬勤前言作为一名iOS开发者,每当使用APP的时候,总难免会情不自禁的去想想,这个怎么做的?该 ...
Qt5学习模仿qq音乐播放器样式（2）——点击动画效果+歌词颜色变换展示
拖的太久,主要再上一篇文章中,新学习了相关知识,做了右键菜单,点击按钮动画切换窗口和播放时歌词颜色显示当前播放位置. 主要为了实现功能的展示,所以很多文件读取都直接采用了本地文件这种比较low的方式. ...
Qt5学习模仿qq音乐播放器样式（1）
尝试用 Qt做一些小例子才能更好的学习与使用. 看了下网上对于qq音乐的样式没有相关文章,所以慢慢模仿做一个.对于桌面应用,Qt当前更多用于工程项目的控制窗口设计.掌握基本信号与槽,函数使用和简单样式 ...
WPF 模仿QQ音乐首页歌单效果
qq音乐桌面版做的效果感觉很不错,今天就模仿一下它首页歌单的效果,从简单做起... 看一下效果: ,其实也很简单,就是布局和动画,触发器...还用到了ItemsControl 下面就看看代码: Mai ...
QQ音乐Android端120万行代码，编译耗时是怎样优化的，凭借这份《数据结构与算法》核心文档
在本文的后续内容中,将介绍几个重点模块的实现. 5. 核心原理代码编译 (1)获取改动文件并进行编译首先需要考虑的问题是,如何识别出用户改动了哪些文件? 我们的做法是,在每次编译成功后,收集所有工 ...
QQ音乐PC端保存歌手写真的方法
1.将光标放置在歌词上:点击右键>歌词操作>打开歌词文件夹,进入歌词文件夹 E:\QQMusicCache\QQMusicLyric 2.返回到上一级目录 E:\QQMusicCache ...
iOS 模仿QQ音乐用Xcode写的一个播放器
** 我使用AvPlayer写的,所以大家一定得记住要导入AvFoundation的库,话不多说,直接上代码 ** 这里我是把AvPlayer封装到了一个类里, // // CXPlayMvViewC ...
模仿QQ音乐做的一个前端界面+矢量图标库推荐
笔者推荐两个矢量图标库网站,超级好用https://www.iconfont.cn/.http://fontawesome.dashgame.com/.
QQ音乐页面效果模仿制作
初学模仿QQ音乐界面大概功能效果实现,css/html 部分代码集合,图片是本地图片需要的话可以在后置文件中提取 <head><style>body {}header {wi ...

模仿QQ音乐wap端

Net Music

模仿QQ音乐wap端

实践中来学习Vue技术栈开发

效果图

开发

views

功能

公用组件

总结

知识点

问题记录

使用

TODO

模仿QQ音乐wap端相关推荐

最新文章

热门文章