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

45次阅读

共计 954 个字符,预计需要花费 3 分钟才能阅读完成。

很多小伙伴练手都会去仿写豆瓣电影或者网易云音乐,所以,这回干脆把两个集合起来,具体长什么样,请各位看预览或下面图片啦。
目的:
做这个项目最主要的目的是为了练习与巩固 vue,所以个人是本着怎么折腾怎么来的原则做的。怎么折腾法呢?比如豆瓣部分我使用了 vant,网易云部分则没有,网易的 ui 组件则是自己造的轮子,当然在实际开发中肯定不会这么搞啦。。还有个人平时看过的知识,像 createApi 啥的会应用上,毕竟看过不如写过嘛,所以通过这么“折腾”的项目,能够学习到很多东西哦,希望能对大家有一点点帮助,有问题也欢迎各位与我交流!!!
主要技术栈:vue vuex axios scss vant
网易云音乐接口:NeteaseCloudMusicApi 这个真好,感谢大佬提供!
源码地址:vue-vant-douban-wangyi 如果各位觉得还不错的话,麻烦给我个 start 鼓励下哈!!感谢各位!!!
在线预览 请在移动模式下浏览
一些图片:
一 欢迎页 骨架屏
二 电影搜索
三 电影(列表、详情、影人详情)

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

五 收藏 可拖拽 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 鼓励下哦!

正文完
 0