Vue仿制移动端QQ音乐(可预览)
项目预览地址:仿制QQ音乐
github地址:项目的github地址
数据是线上抓取的,如果页面有问题,则是数据接口出现问题,需要重新找数据接口
技术栈
- vue
- vue-router
- vuex
- jsonp
- audio
- flex
- mint-ui
自己首先是自己写逻辑,实在解决不了的就会观看视频和视频源码。
通过整个项目,加深了自己对vue的理解和应用,如计算属性、watch、vue生命周期、过渡、列表渲染、状态管理、路由切换、前端通信等。
总之收获很大,在学习vue文档时,那些概念没有实际的运用场景,就没有真正的理解透彻。
实现的功能
- 推荐歌单页、电台、歌手、搜素页面
- 线上抓取100名歌手信息
- 编写播放器组件(包括前进、后退、上一首、下一首、播放暂停等功能)
- 全页面播放(随机播放、顺序播放、单曲循环等模式切换)
- 搜索页面下拉获取更多数据
- localStorage存储用户播放历史和喜欢歌曲
- 加载loading
- 数据全是通过线上抓取
项目截图
项目目录结构
api存放获取后端数据的js;
assets主要存放静态的img、js、font、css等
components主要存放公用组件
page主要存放路由跳转的组件
router存放路由
store存放状态管理
App.vue是项目根组件
min.js是项目入口文件
遇到的问题
1.数据难以获取,电台数据和歌词数据目前无法处理跨域,其他都是通过jsonp封装成promise对象来实现跨域(如果数据接口不能用,以后还有重新抓取)
2.自己本来想实现一个菜单滚动到顶部后就固定的功能(css提供了一种新的position:sticky 也可以实现类似的功能),但是移动端不能监听onscroll事件
3.利用的mint-ui的图片懒加载,但是想实现不同页面运用不同的默认懒加载图片
4.在手机上展开播放列表后,还可以滚动被覆盖的其他页面
5.计算属性中不能用this.$refs。因为计算属性在created阶段之后mounted之前执行,而this.$refs在mounted之后才存在(生命周期还有很多地方需要理解)
6.项目是用原生css来写的,以前并不觉得css预处理语言有什么优势,但我在写项目样式时,才发现样式复用率太低。每次都要获取父选择器,不能嵌套写,没有变量等等
最后
我是自学的vue,所以可能还存在很多问题,比如代码不够规范、逻辑不够清晰、组件复用不够等。
但总的来说还是有进步。公司现在改用react做项目,最近又在学习react。github上面的readme还不会写,所以没放上什么东西,但是有项目的源码,如果觉得可以还是star鼓励一下。
其他个人项目
- 基于vue+vue-router+jsonp+vuex仿制的移动端
QQ音乐
- 基于React-Antd的
后台模板Demo
- 基于原生小程序精仿的
猫眼电影小程序
觉得不错的给个star鼓励支持!^_^
Vue仿制移动端QQ音乐(可预览)相关推荐
- 首次实战Vue高仿移动端QQ音乐项目解析
博主是第一次写博客,欢迎前来指正! 项目预览地址:http://dv20912014.iok.la (这里重点强调一下,项目是使用花生壳内网穿透映射出去的,为什么要这样做下面我会做详细的解释,由于用 ...
- vue移动端实现excel在线预览
上篇博客我提到了ios手机不能实现下载功能,但是可以实现预览,图片预览和pdf预览我已经在前篇博客做了讲解,但是,在工作中大家上传最多的应该是excel的文件,今天我就讲解一下excel移动端的预览实 ...
- 手机QQ访问时,html页面在QQ中自定义预览和自定义分享
手机QQ访问时,html页面在QQ中自定义预览和自定义分享 有一天,产品说要做个自定义预览和分享功能,于是很快在微信上实现了,可是不知道在QQ上怎么实现,查看了很多网站,最后才找到了解决方案,于是想和 ...
- vue 图片裁剪工具_使用Vue.js的图片裁剪工具,包括预览
vue 图片裁剪工具 Vue作物 (vue-crop) Images Crop tool with Vue.js including preview. 使用Vue.js的图片裁剪工具,包括预览. Vi ...
- vue+element高度仿照QQ音乐,完美实现PC端QQ音乐
一.前言 QQ音乐官网:点击访问 作者成品效果预览:点击访问 作者其他博客成品汇总预览:点击访问 暂时源码并没有提供其他获取渠道,私聊作者获取即可,或通过博客后面名片添加作者,很简单! 二.主要功能点 ...
- vue 2.0系列QQ音乐播放器案例
我可能做了一个假的qq音乐demo, 本demo参考 https://y.qq.com 开发的,难怪跟网上其他人的案例界面不一样...Orz Build Setup git clone https:/ ...
- 前后端分离 Spring Boot + Vue 开发网易云QQ音乐(附源码)!
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章 作者|xiangzhihong segmentfault.com/ ...
- vue使用pdf.js实现移动端在线PDF文件预览
背景 产品需求涉及到动态的PDF展示,PDF是由后端去生成的,然后下发给前端在线的cdn地址,H5需要实现在线PDF预览的能力 方案 H5展示合同PDF,有很多实现方式.但是通过尝试后发现在不同操作系 ...
- vue 后台返回的文件流进行预览_基于 Vue3+Ts 后台前端管理系统Vue3-Admin
今天再给大家分享一款超不错的Vue中后台管理系统Vue3Admin. vue3-admin 基于VueCli4+Ts+ElementUI构建的后台系统.采用组件化开发模式及Flex布局,支持移动端适配 ...
- ElementUI h5 移动端照片拍照 本地预览 旋转压缩 并上传
文章目录 调用摄像头拍照 本地预览 旋转压缩 上传 功能需求是移动端扫描二维码之后,跳转到在线网页进行自拍,然后上传拍照结果. 调用摄像头拍照 在h5中,使用input type="file ...
最新文章
- 红帽子RedHat Linux 9.0安装图解(图)
- redis成长之路——(一)
- 通过 TaskScheduler 新建windows计划
- linux出站入站端口维护,linux下如何用iptables开放指定端口_网站服务器运行维护,linux,iptables,端口...
- mpeg2,mpeg4,h264编码标准的异同
- java 并发 线程安全_Java并发教程–线程安全设计
- 谈谈java中遍历Map的几种方法
- easyui动态显示和隐藏表头
- vb.net如何查询电脑麦克风收到声音_EMUI 10.1 跨屏协同实测:这一次把你的手机「搬」进电脑...
- php二维数组指定其键名对其排序的方法
- 重定位----操作系统做的事情
- Jenkins进阶-Gitlab使用Webhook实现Push代码自动部署(3)
- 腾讯专注关键词的深度语义匹配模型
- 如何构建config文件
- 织梦 php模板修改,织梦专题模板修改.doc
- 【oracle】Linux环境安装Oracle客户端
- springboot启动banner图片
- java提取图片文字
- python列重命名
- ReactOS学习笔记--编译和调试