tmusic
项目介绍
一个零基础自学vue后的练手项目,目标是实现一个web移动端的播放器。原本使用的vue2.x,在学习过程中查文档觉得vue3的API中的功能比较好,趁着才刚刚开始迁移过来。
全程参考网易云API接口文档(界面设计得更好看)QQ音乐APP。
项目初始的基本搭建过程,可以参考B站教程
慢慢实现,欢迎学习vue的同学一起交流。
运行项目
-
本地后端接口(已更改为网易云api,更容易运行直接按文档运行就行了,登录也更简单)
参考API接口转发文档,具体过程文档中有介绍,这里修改的配置有-
跨域设置。在app.js
中加入如下设置const app = express() //设置允许跨域 app.all('*', function (req, res, next) { //设置允许跨域的域名,*代表允许任意域名跨域 res.header('Access-Control-Allow-Origin', '*') //允许的header类型 res.header('Access-Control-Allow-Headers', 'content-type') //跨域允许的请求方式 res.header('Access-Control-Allow-Methods', 'DELETE,PUT,POST,GET,OPTIONS') if (req.method.toLowerCase() == 'options') res.send(200) //让options尝试请求快速结束 else next() })
-
设置cookie。开发过程中为了听杰伦的歌,其实也可以不设置。大概过程就是自己在网页登录了,获取自己的cookie,然后利用API接口转发文档中的方法,用postman发送一个post请求既可
-
-
前端项目
cd tmusic
npm install
npm run serve
- fastclick报错
在fastclick.js中330行
取消判断元素
// 不选择input中range类型
if (targetElement.nodeName==='INPUT' && targetElement.type==='range') {
return
}
better-scroll
自动跳转BUG,不仅仅在歌词页面,有些其他页面也会自动跳转到默认位置的-20px高度
开发记录及功能介绍
已有功能
- 推荐页面:轮播图,搜索框,推荐歌单
- 歌单详情页
- mini播放器,播放、暂停、进入歌曲列表
- 全屏播放器,切歌,选择播放顺序,自动播放;进度条显示和拖动定位
- 歌词显示和滚动,歌词选择跳转
- 搜索热榜,搜索建议
- 播放列表多页显示
- 搜索详情页显示
正在进行
- 歌单详情页功能
- 排行页面
- 歌手列表和歌手详情页
待完成
- playlist显示历史播放列表
- 播放器自动切换下一曲
- 随机获取歌曲
开发记录
- 2021年1月17日:迁移基本项目结构,显示推荐歌曲及详情页
- 2021年1月18日:迁移完player组件,播放、暂停、切歌,自动播放;显示进度条
- 2021年1月19日:进度条拖动定位,player样式调整
- 2021年1月20日:player组件抽离,播放时背景图及虚化
- 2021年1月21日:歌词显示和滚动
- 2021年1月22日:播放器相关变量存入vuex管理
- 2021年1月23日:歌词显示优化,歌词跳转功能
- 2021年1月24日:修改轮播图样式,添加显示搜索框
- 2021年1月25日:更换网易云api,首页推荐歌单,歌单详情显示
- 2021年1月27日:歌词滚动和跳转bug,歌词代码优化
- 2021年1月28日:player组件组合式api改造完成player组件代码结构调整;功能图片全部使用foteawsome-icon
- 2021年1月29日:添加typescript类型推断:vuex,network/player,歌词功能代码部分
- 2021年1月30日:搜索页面显示;搜索建议显示及功能
- 2021年1月31日:搜索热榜播放功能;playlist显示样式;playlist滑动功能;一些hooks抽取
- 2021年2月1-4日:热搜页面,搜索详情页显示
- 轮播图滑动hook提取