博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue+vant同一项目实现豆瓣电影加网易云音乐webapp-最佳练手项目
阅读量:7105 次
发布时间:2019-06-28

本文共 1020 字,大约阅读时间需要 3 分钟。

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

目的:

做这个项目最主要的目的是为了练习与巩固vue,所以个人是本着怎么折腾怎么来的原则做的。怎么折腾法呢?比如豆瓣部分我使用了vant,网易云部分则没有,网易的ui组件则是自己造的轮子,当然在实际开发中肯定不会这么搞啦。。还有个人平时看过的知识,像createApi啥的会应用上,毕竟看过不如写过嘛,所以通过这么“折腾”的项目,能够学习到很多东西哦,希望能对大家有一点点帮助,有问题也欢迎各位与我交流!!!

主要技术栈 : vue vuex axios scss vant 

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

源码地址: 如果各位觉得还不错的话,麻烦给我个start鼓励下哈!!感谢各位!!!

  请在移动模式下浏览

一些图片:

一 欢迎页 骨架屏

     

二 电影搜索

     

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

     

     

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

     

 

       

五 收藏 可拖拽mini播放器

功能介绍:

0 rem适配

1 欢迎页 骨架屏

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

3 电影搜索

4 电影详情

5 影人详情

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

7 电影收藏

8 歌单查看

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

10 ......

个人觉得一些项目优点  :

代码非常整洁

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 增加手动输入城市

最后感谢各位!希望给个start鼓励下哦  !!!

转载于:https://juejin.im/post/5c769d046fb9a049f9133e93

你可能感兴趣的文章
Ubuntu启动时直接进入命令行模式
查看>>
JavaScript中基本数据类型和引用数据类型的区别
查看>>
Juery实现选项卡
查看>>
PHP汉字转换拼音
查看>>
(转)阿里云出现身份验证错误,要求的函数不受支持的解决办法
查看>>
.call 和 .apply 的区别是什么?
查看>>
js之oop <二> 对象属性
查看>>
Linux命令: 在线使用linux命令环境
查看>>
Java面试题 锁 synchronized BAT面试题系列 基础篇(十一)
查看>>
冲刺第六天 1.7 MON
查看>>
初识servlet
查看>>
WebClien简单示例(一)
查看>>
POJ-1472 Instant Complexity 模拟
查看>>
定位错误:glibc detected :double free or corruption (!prev): 0x08a03b88
查看>>
Linux信号列表
查看>>
11.11.24
查看>>
PHP面向对象之final关键字
查看>>
模块化编程
查看>>
关于visual studio 2010 与windows phone 的整合安装问题
查看>>
数据预处理规则
查看>>