{"id":27704451,"url":"https://github.com/houbx/webApp","last_synced_at":"2025-04-26T01:01:57.238Z","repository":{"id":215851419,"uuid":"83060065","full_name":"AnnoWook/webApp","owner":"AnnoWook","description":"Vue2的移动端webApp音乐播放器","archived":false,"fork":false,"pushed_at":"2017-04-18T14:48:54.000Z","size":1932,"stargazers_count":94,"open_issues_count":0,"forks_count":36,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-19T05:49:12.437Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/AnnoWook.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}},"created_at":"2017-02-24T16:18:05.000Z","updated_at":"2024-05-17T07:17:33.000Z","dependencies_parsed_at":"2024-01-18T06:12:44.032Z","dependency_job_id":null,"html_url":"https://github.com/AnnoWook/webApp","commit_stats":null,"previous_names":["houbx/webapp","annowook/webapp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnnoWook%2FwebApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnnoWook%2FwebApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnnoWook%2FwebApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnnoWook%2FwebApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AnnoWook","download_url":"https://codeload.github.com/AnnoWook/webApp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250917360,"owners_count":21507562,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2025-04-26T01:01:54.780Z","updated_at":"2025-04-26T01:01:57.216Z","avatar_url":"https://github.com/AnnoWook.png","language":"Vue","readme":"###项目文档\n\n##### 项目在线地址\n\n已过期\n\n##### webApp项目建立\n\n* 四个页面分类(推荐,排行,路由,我的)\n* 基本样式结构搭建  颜色暂定  rgb(105, 25, 51)\n* 首页页 : 1.轮播图  2.搜索  3.歌手分类  4.歌曲分类  5.新歌速递  6.每日推荐\n* 排行页 : 1.搜索   2.巅峰榜列表展示(各种类歌单的前三首展示)\n* 歌单页 : 1.轮播图 2.全部歌单(其中一个歌单的全部整个列表图片+歌名)\n* 我的页面 : 个人设置部分 (细节待定 暂为空)\n\n\n##### 使用数据(数据为QQ音乐官方接口,仅供学习)\n\n* 功能 :\n* 跑通页面跳转路由 vue-router\n* 没有使用原生ajax , 而是使用了vue-resource插件代替原生ajax进行接口调用\n    + this.$http.get(url, ).then(function(response) { console.log(response) })\n* 需要的数据 : 歌名 歌手名 图片 歌曲播放地址\n* 列表渲染将数据渲染到页面  v-for\n* 事件处理器 对被渲染在页面上的歌曲做操作  v-on\n\n---\n\n* 问题 :\n* 引入插件报错问题\n\n\n\n##### 样式修正\n\n* 修复 :\n* 由于之前引入的是自己写的一个功能类插件 代码中写入了大量的事件 不符合vue的事件处理机制 所以报错\n* 修改页面结构样式\n* 某些指定事件添加方法 给元素ref属性 在 生命周期methods 中写入执行代码\n\n---\n\n* 问题 :\n* 一首歌曲播放结束后就会报错卡死\n* 页面间的数据传递问题 需要将歌词的id传递到播放页面\n\n\n##### 增加功能\n* 新增\n* 搜索部分功能\n* 搜索列表展示下拉加载功能(每条10首歌)\n* 通过获取id ,用此id请求歌曲的歌词 通过正则表达式处理lrc格式的歌词\n* 歌词同步渲染到页面 通过歌词中的时间与当前播放时长的对应关系\n* 增加loading样式 增强体验效果\n\n* 修复\n* 通过配置路由和点击事件的参数传递,另一个页面的数据接收问题解决\n* 修改搜索模式 选中搜索框直接进入搜索页面 提高效率\n\n##### 整体修改\n* 修改\n* 整体页面背景颜色修改\n* 增加禁止缩放限制\n* 增加移动端浏览器访问体验 移动端主流浏览器体验优化\n* 增加各种机型适配样式 修复移动端部分样式错乱问题\n\n---\n\n* 问题与想法\n* 整体背景修改后的部分样式不明显问题\n* 懒加载问题\n* 关于播放页面\n    + 3个按钮在移动端显示的时候总感觉是歪的\n    + 无播放列表 没有做切换歌曲的功能\n\n\n##### 重构\n\n* 安装 vue-awesome-swiper 插件 让4个主要导航滑动展示 增强体验\n* 新增一个home页面  将4个页面配合vue-awesome-swiper 插件渲染到home页面 在通过路由渲染到入口页\n\n##### 播放列表重建\n* 思路\n* 将进入方式从路由跳转转为展开隐藏在home页面中的元素 (好处是可以获取到更多的信息 不仅仅是歌曲id)\n* 选择一首歌之后并不会直接进入大的播放页面 而是将歌曲添加到页面底部的播放栏中 当点击这个播放栏时 在展开整页的播放器\n\n##### VueX的加入\n* 使用vuex作为数据存储空间与多个组件间的通信功能\n* 减少了路由跳转页面 变为组件与组件间的跳转\n* 由于用到vuex中的辅助函数 需要用到es7的语法 下载相关babel解析包并重新配置.babelrc文件\n* 页面结构变更 新增底部的播放器\n\n##### 播放列表重建2\n* 新增播放列表并配置列表功能 选中的歌曲添加至列表中可任意选择播放\n* 底部播放器与整页单曲播放器的跳转\n* 2个播放页面数据统一\n* 光碟样式回归 并将光碟改为当前播放歌曲的封面\n* 播放页背景为虚化的歌曲图片\n* 上一首  下一首\n\n##### 优化\n\n* 修改播放组件代码结构 将数据方面的代码移至vuex中\n\n##### 预知后事如何 请听下回分解\n* 歌词改为只展示一句 显示在光碟的下面(暂定)\n* 播放模式\n\n\n##### 已知bug\n* 播放页面css3滤镜属性UC浏览器不支持\n* 无歌曲时底部播放栏应该隐藏\n* 播放组件代码量过多 应该做拆分\n\n\n## Start\n+ npm install\n\n## Develop\n+ npm run dev\n\n## Build\n+ npm run build\n\n##### 项目截图\n\n![首页] (https://github.com/houbx/webApp/blob/master/screenshot/recommend.png)\n![排行] (https://github.com/houbx/webApp/blob/master/screenshot/rank.png)\n![播放] (https://github.com/houbx/webApp/blob/master/screenshot/play.png)\n![搜索] (https://github.com/houbx/webApp/blob/master/screenshot/search.png)\n","funding_links":[],"categories":["Demo示例"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoubx%2FwebApp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoubx%2FwebApp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoubx%2FwebApp/lists"}