vue+vant同一项目实现豆瓣电影加网易云音乐webapp-最佳练手项目

不少小伙伴练手都会去仿写豆瓣电影或者网易云音乐,因此,这回干脆把两个集合起来,具体长什么样,请各位看预览或下面图片啦。css

目的:

作这个项目最主要的目的是为了练习与巩固vue,因此我的是本着怎么折腾怎么来的原则作的。怎么折腾法呢?好比豆瓣部分我使用了vant,网易云部分则没有,网易的ui组件则是本身造的轮子,固然在实际开发中确定不会这么搞啦。。还有我的平时看过的知识,像createApi啥的会应用上,毕竟看过不如写过嘛,因此经过这么“折腾”的项目,可以学习到不少东西哦,但愿能对你们有一点点帮助,有问题也欢迎各位与我交流!!!vue

主要技术栈 : vue vuex axios scss vant ios

网易云音乐接口NeteaseCloudMusicApi这个真好,感谢大佬提供!git

源码地址vue-vant-douban-wangyi 若是各位以为还不错的话,麻烦给我个start鼓励下哈!!感谢各位!!!github

在线预览 请在移动模式下浏览
二维码vuex

一些图片:

一 欢迎页 骨架屏
图片描述骨架屏axios

二 电影搜索
搜索关键字搜索列表浏览器

三 电影 (列表、详情、影人详情)
电影电影详情学习

电影评价影人

四 音乐 (主页、歌单、播放器)
音乐歌单优化

播放器歌词

五 收藏 可拖拽mini播放器
图片描述

主要功能:

0 rem适配

1 欢迎页 骨架屏

2 地区定位 加载地区热映电影 即将上映 top250

3 电影搜索

4 电影详情

5 影人详情

6 跳转到电影网站观看电影

7 电影收藏

8 歌单查看

9 全屏播放器 拖拽mini播放器 歌词滚动

10 ......

我的以为一些项目优势 :

1 代码很是整洁

2 如上所述够“折腾”

3 项目结构可拓展性可维护性强

后续可能会更新:

1 歌曲搜索

2 歌曲收藏

3 优化loading (已更新)

2019-3-7更新:

1 定位:先使用搜狐,若失败再使用百度地图。
2 优化:loading,从loading指令改为了loading组件。

2019-3-9更新

1 发现歌单背景高斯模糊效果,在小米自带浏览器下过分时卡顿,因此去掉了改了下歌单样式。
2 仍是小米自带的浏览器。。修复了获取不了歌曲总长度的bug。
3 修复了歌词过长时文字重叠bug。
4 从一个歌单快速切换到另外一个歌单时,可能会出现显示的是前一个歌单的歌曲的状况,因此axios增长请求前先取消前面请求的配置。2019-3-22更新1 加快电影详情滑动速度2 增长手动输入城市

2019-3-22更新

1 加快电影详情滑动速度
2 增长手动输入城市
图片描述

最后感谢各位!但愿给个start鼓励下哦!

相关文章
相关标签/搜索