{"id":19057462,"url":"https://github.com/weianke/vue-music","last_synced_at":"2026-04-28T00:31:49.098Z","repository":{"id":102736596,"uuid":"96609676","full_name":"weianke/vue-music","owner":"weianke","description":"基于Vue 全家桶 (2.x)制作的移动端音乐 WebApp","archived":false,"fork":false,"pushed_at":"2019-01-09T15:32:35.000Z","size":939,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-22T11:06:20.188Z","etag":null,"topics":["axios","html5","localstorage","vue-router","vue2","vuex","webpack"],"latest_commit_sha":null,"homepage":"https://weianke.github.io/vueMusic","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/weianke.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-08T09:40:53.000Z","updated_at":"2023-12-23T14:08:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"72671148-9f49-419a-8e63-a3827fee1945","html_url":"https://github.com/weianke/vue-music","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/weianke/vue-music","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weianke%2Fvue-music","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weianke%2Fvue-music/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weianke%2Fvue-music/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weianke%2Fvue-music/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weianke","download_url":"https://codeload.github.com/weianke/vue-music/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weianke%2Fvue-music/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32361477,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-27T20:07:02.737Z","status":"ssl_error","status_checked_at":"2026-04-27T20:07:00.910Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","html5","localstorage","vue-router","vue2","vuex","webpack"],"created_at":"2024-11-08T23:57:27.307Z","updated_at":"2026-04-28T00:31:49.075Z","avatar_url":"https://github.com/weianke.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# 移动端音乐 WebApp\n\n基于 **Vue 全家桶 (2.x)** 制作的移动端音乐 WebApp ，一个媲美原生的移动端音乐 App，项目完整、功能完备、UI美观、交互一流。\n\n👉 项目演示地址: https://weianke.github.io/vueMusic/ （在GitHub Pages 中，通过 jsonp 请求的数据会被正常渲染，而由于无 node 服务，通过 axios 请求的数据不会被正常渲染）\n\n\n![图片预览](http://oph264zoo.bkt.clouddn.com/17-8-11/52879457.jpg)\n\n## 技术栈\n\n【前端】\n\n- `Vue`：用于构建用户界面的 MVVM 框架。它的核心是**响应的数据绑定**和**组系统件**\n- `vue-router`：为单页面应用提供的路由系统，项目上线前使用了 `Lazy Loading Routes` 技术来实现异步加载优化性能\n- `vuex`：Vue 集中状态管理，在多个组件共享某些状态时非常便捷\n- `vue-lazyload`：第三方图片懒加载库，优化页面加载速度\n- `better-scroll`：iscroll 的优化版，使移动端滑动体验更加流畅\n- `Sass(Scss)`：css 预编译处理器\n- `ES6`：ECMAScript 新一代语法，模块化、解构赋值、Promise、Class 等方法非常好用\n\n【后端】\n\n- `Node.js`：利用 Express 起一个本地测试服务器\n- `jsonp`：服务端通讯。抓取 QQ音乐(移动端)数据\n- `axios`：服务端通讯。结合 Node.js 代理后端请求，抓取 QQ音乐(PC端)数据\n\n【自动化构建及其他工具】\n\n- `vue-cli`：Vue 脚手架工具，快速初始化项目代码\n- `eslint`：代码风格检查工具，规范代码书写\n- `vConsole`：移动端调试工具，在移动端输出日志\n\n\n## 收获\n\n1. 总结了一套 Vue 通用组件，可以在其它项目中复用的 10+ 个基础组件、15+ 个业务组件\n2. 总结了一套常用的 SCSS mixin 库\n3. 总结了一套常用的 JS 工具函数库\n4. 体会到组件化、模块化开发带来的便捷\n5. 体会到将对象封装成类(ES6 class) 的便捷性，以及利用工厂方式初始化类实例\n6. 学会利用 `js` 编写过渡效果及动画效果制作良好的用户交互体验\n\n## TODO\n\n1. 歌曲数据全部来自 QQ 音乐，接口改变了可能就要修改 `jsonp` 和 `axios` 代码\n\n\n## 实现细节\n\n主要页面：播放器内核页、推荐页、歌单详情页、歌手页、歌手详情页、排行页、搜索页、添加歌曲页、个人中心页等。\n\n核心页面：播放器内核页\n\n**组件树**\n\n```\n\u003capp\u003e ................... 根组件\n  \u003cmy-player\u003e ........... 全局的播放器内核组件\n  \u003cmy-header\u003e ........... 头部组件\n  \u003cmy-tab\u003e .............. 导航栏组件\n  \u003crouter-view\u003e ......... 路由\n    \u003crecommend\u003e ......... 推荐页\n    \u003csinger\u003e ............ 歌手页\n    \u003crank\u003e .............. 排行页\n    \u003csearch\u003e ............ 搜索页\n```\n\n**推荐页**\n\n上部分是一个轮播图组件，使用第三方库 `better-scroll` 辅助实现，使用 `jsonp` 抓取 QQ音乐(移动端)数据\n\n下部分是一个歌单推荐列表，使用 `axios + Node.js` 代理后端请求，绕过主机限制 (伪造 headers)，抓取 QQ音乐(PC端)数据\n\n歌单推荐列表图片，使用图片懒加载技术 `vue-lazyload`，优化页面加载速度\n\n为了更好的用户体验，当数据未请求到时，显示 `loading` 组件\n\n**推荐页 -\u003e 歌单详情页**\n\n由于歌手的状态多且杂，这里使用 `vuex` 集中管理歌手状态\n\n这个组件更加注重 UX，做了很多类原生 APP 动画，如下拉图片放大、跟随推动、ios 渐进增强的高斯模糊效果 `backdrop-filter` 等\n\n**歌手页**\n\n左右联动是这个组件的难点\n\n左侧是一个歌手列表，使用 `jsonp` 抓取 QQ音乐(PC端)歌手数据并重组 JSON 数据结构\n\n列表图片使用懒加载技术 `vue-lazyload`，优化页面加载速度\n\n右侧是一个字母列表，与左侧歌手列表联动，滚动固定标题实现\n\n**歌手页 -\u003e 歌手详情页**\n\n复用歌单详情页，只改变传入的参数，数据同样爬取自 QQ音乐\n\n**播放器内核页**\n\n核心组件。用 `vuex` 管理各种播放时状态，播放、暂停等功能调用 [audio API](http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp)\n\n播放器可以最大化和最小化\n\n中部唱片动画使用第三方 JS 动画库 `create-keyframe-animation` 实现\n\n底部操作区图标使用 `iconfonts`。\n\n抽象了一个横向进度条组件和一个圆形进度条组件，横向进度条可以拖动小球和点击进度条来改变播放进度，圆形进度条组件使用 SVG `\u003ccircle\u003e` 元素\n\n播放模式有：顺序播放、单曲循环、随机播放，原理是调整歌单列表数组\n\n歌词的爬取利用 `axios` 代理后端请求，伪造 `headers` 来实现，先将歌词 jsonp 格式转换为 json 格式，再使用第三方库 [`js-base64`](https://github.com/dankogai/js-base64) 进行 Base64 解码操作，最后再使用第三方库 [`lyric-parser`](https://github.com/ustbhuangyi/lyric-parser)对歌词进行格式化\n\n实现了侧滑显示歌词、歌词跟随进度条高亮等交互效果\n\n增加了当前播放列表组件，可在其中加入/删除歌曲\n\n**排行页**\n\n普通组件，没什么好说的\n\n**排行页 -\u003e 歌单详情页**\n\n复用歌单详情页，没什么好说的\n\n**搜索页**\n\n抓数据，写组件，另外，根据抓取的数据特征，做了上拉刷新的功能\n\n考虑到数据量大且频繁的问题，对请求做了节流处理\n\n考虑到移动端键盘占屏的问题，对滚动前的 `input` 做了 `blur()` 操作\n\n对搜索历史进行了 `localstorage` 缓存，清空搜索历史时使用了改装过的 `confirm` 组件\n\n支持将搜索的歌曲添加到播放列表\n\n**个人中心**\n\n将 `localstorage` 中 “我的收藏” 和 “最近播放” 反映到界面上\n\n**其他**\n\n此应用的全部数据来自 QQ音乐，推荐页的歌单列表及歌词是利用 `axios` 结合 `node.js` 代理后端请求抓取的。\n\n全局通用的应用级状态使用 `vuex` 集中管理\n\n全局引入 `fastclick` 库，消除 click 移动浏览器300ms延迟\n\n页面是响应式的，适配常见的移动端屏幕，采用 `flex` 布局\n\n## Build Setup\n\n``` bash\n# clone the repo into your disk.\n$ git clone https://github.com/weianke/vue-music.git\n\n# install dependencies\n$ npm install\n\n# serve with hot reload at localhost:8080\n$ npm run dev\n\n# build for production with minification\n$ npm run build\n```\n\n\n## License\n\nThe code is available under the [MIT license](https://opensource.org/licenses/MIT).\n\n![](http://oph264zoo.bkt.clouddn.com/17-8-11/10545126.jpg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweianke%2Fvue-music","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweianke%2Fvue-music","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweianke%2Fvue-music/lists"}