QQ 音乐 WebApp

介绍

该项目来源HuangYi, 之前写过他的eleApp,后来发现这个音乐 App，可惜未开源，但是有盗版开源，所以就有了这个仓库，后面回提到我的一些改进，总结。

之前接触过 React 和 Ng，所以上手Vue较快 但是为了防止自己的代码和老项目代码写的大头小易，养成不好习惯 就准备找个项目来学习，取长补短，同时也为了进一步熟悉理解Vue，所以就有了eleApp和本项目

数据来源 QQ 音乐 JSONP，Node 代理部分接口，托管于 VPS，PM2 部署，Nginx 代理

扫一扫手机预览 (微信右上角使用浏览器打开,网站被墙可访问备用地址)

备用：演示地址

耗时

201710 - 201801

平台

• macOS High Sierra
• vscode

相关

• Vue2.x vue-router vuex axios
• less
• ES6 standardjs 规范
• Express
• jsonp axios promise
• Vultr/heroku PM2 Nginx

分支

• master
• lib-flex 添加自适应布局即rem布局 完成并合并到master
• pre-render 预渲染实现 已完成 没有合并到master
• ssr 服务端渲染实现 待完成

组件

• 基础组件：确认对话框，loading，进度条，搜索框，滚动组件
• 业务组件：歌单详情，播放内核，搜索页面，顶部导航，排行榜等组件
• 上拉刷新，函数防抖动搜索，消除点击延迟，异步路由

已完成部分

• /recommand 推荐页：轮播图，推荐歌单列表
• /singer 歌手页列表：歌手列表展示，左右联动，快速入口，类似通讯录
• /singer/:id 歌手详情页：局部滚动，视差，播放音乐，音乐播放器有的功能都有
• /rank/:id 排行页：同上
• /search 搜索：搜索结果，搜索历史，热门搜索，结果播放
• 播放列表页：当前播放队列
• ~~~用户中心页~~~

调试工具

• vConsole
• Charles
• GIF录制

注意事项

• animation-play-state: paused ios 不支持解决方案
• min-player 进度条实现
• [email protected]+  ios 不能播放问题

改进及优化

• QQ音乐 UI
• 打包优化
• 适配优化

打包

• 根据打包后的分析报告进行优化
• 处理 vendor，一般都是这部分体积大，相关类库一般不会变化，所以单独打包和其它文件一样加上 chunkhash 辨别文件是否变化，同时把 manifest 抽离出来，保证 manifest 变化不影响 vendor 变化导致重新缓存,这样默认就是304，现在我通过 node 把他设置成强缓存了....外加加载gzip
• 采用路由懒加载

适配

• 多端同构 webApp, Hybrid，采用 [email protected] （相比以前的版本我更倾向于 2.x）配合 px2rem

• IOS 的 Safari 浏览器和微信 webview兼容性和适配问题,此应用未调用设备 API

IOS 适配

• 打包成 ios Hybrid 系列模拟器正常 如 iphone7 Plus

• webApp && chrome

Andriod 适配

GenyMotion，夜神 我的电脑运行模拟器卡...

总结

• 201710 - 20180112 几个月的时间, 基本完成了我预期的开发，但是滚动库，歌词的处理等是原作者开源项目的，我在这个项目学到的东西主要是学习好的编程风格，养成良好的习惯，更好的理解 Vue，增加开发经验
• 有了本项目，eleApp，和我工作中的 Vue 开发经验，以及element ui部分源码的阅读，至此已经对 Vue 的使用及特性有了一定的理解，同时我也在阅读 Vue 的一些源代码去深入的理解 Vue，这样会更好的处理开发中遇到的问题
• 工程化大致反向

• 前端架构

• 上线

未来展望

PWA

本地预览

$ git clone https://github.com/yxuchen/Music-Player.git
$ cd Music-Player
$ yarn install
$ yarn run dev