摘要：很多小伙伴練手都會去仿寫豆瓣電影或者網(wǎng)易云音樂，所以，這回干脆把兩個(gè)集合起來，具體長什么樣，請各位看預(yù)覽或下面圖片啦。怎么折騰法呢比如豆瓣部分我使用了，網(wǎng)易云部分則沒有，網(wǎng)易的組件則是自己造的輪子，當(dāng)然在實(shí)際開發(fā)中肯定不會這么搞啦。。

很多小伙伴練手都會去仿寫豆瓣電影或者網(wǎng)易云音樂，所以，這回干脆把兩個(gè)集合起來，具體長什么樣，請各位看預(yù)覽或下面圖片啦。

做這個(gè)項(xiàng)目最主要的目的是為了練習(xí)與鞏固vue，所以個(gè)人是本著怎么折騰怎么來的原則做的。怎么折騰法呢？比如豆瓣部分我使用了vant，網(wǎng)易云部分則沒有，網(wǎng)易的ui組件則是自己造的輪子，當(dāng)然在實(shí)際開發(fā)中肯定不會這么搞啦。。還有個(gè)人平時(shí)看過的知識，像createApi啥的會應(yīng)用上，畢竟看過不如寫過嘛，所以通過這么“折騰”的項(xiàng)目，能夠?qū)W習(xí)到很多東西哦，希望能對大家有一點(diǎn)點(diǎn)幫助，有問題也歡迎各位與我交流?。?！

主要技術(shù)棧 ： vue vuex axios scss vant

網(wǎng)易云音樂接口 ：NeteaseCloudMusicApi這個(gè)真好，感謝大佬提供！

源碼地址： vue-vant-douban-wangyi 如果各位覺得還不錯(cuò)的話，麻煩給我個(gè)start鼓勵(lì)下哈?。「兄x各位?。。?/p>

在線預(yù)覽 請?jiān)谝苿?dòng)模式下瀏覽

一 歡迎頁 骨架屏

二 電影搜索

三 電影 （列表、詳情、影人詳情）

四 音樂 （主頁、歌單、播放器）

五 收藏 可拖拽mini播放器

0 rem適配

1 歡迎頁 骨架屏

2 地區(qū)定位 加載地區(qū)熱映電影 即將上映 top250

3 電影搜索

4 電影詳情

5 影人詳情

6 跳轉(zhuǎn)到電影網(wǎng)站觀看電影

7 電影收藏

8 歌單查看

9 全屏播放器 拖拽mini播放器 歌詞滾動(dòng)

10 ......

1 代碼非常整潔

2 如上所述夠“折騰”

3 項(xiàng)目結(jié)構(gòu)可拓展性可維護(hù)性強(qiáng)

1 歌曲搜索

2 歌曲收藏

3 優(yōu)化loading （已更新）

1 定位：先使用搜狐，若失敗再使用百度地圖。
2 優(yōu)化：loading，從loading指令改成了loading組件。

1 發(fā)現(xiàn)歌單背景高斯模糊效果，在小米自帶瀏覽器下過度時(shí)卡頓，所以去掉了改了下歌單樣式。
2?還是小米自帶的瀏覽器。。修復(fù)了獲取不了歌曲總長度的bug。
3 修復(fù)了歌詞過長時(shí)文字重疊bug。
4 從一個(gè)歌單快速切換到另一個(gè)歌單時(shí)，可能會出現(xiàn)顯示的是前一個(gè)歌單的歌曲的情況，所以axios增加請求前先取消前面請求的配置。2019-3-22更新1 加快電影詳情滑動(dòng)速度2 增加手動(dòng)輸入城市

1 加快電影詳情滑動(dòng)速度
2 增加手動(dòng)輸入城市

最后感謝各位！希望給個(gè)start鼓勵(lì)下哦！