vue+vant同一專案實現豆瓣電影加網易雲音樂webapp-最佳練手專案

歐企鵝發表於2019-03-03

很多小夥伴練手都會去仿寫豆瓣電影或者網易雲音樂,所以,這回乾脆把兩個集合起來,具體長什麼樣,請各位看預覽或下面圖片啦~

目的:

做這個專案最主要的目的是為了練習與鞏固vue,所以個人是本著怎麼折騰怎麼來的原則做的。怎麼折騰法呢?比如豆瓣部分我使用了vant,網易雲部分則沒有,網易的ui元件則是自己造的輪子,當然在實際開發中肯定不會這麼搞啦。。還有個人平時看過的知識,像createApi啥的會應用上,畢竟看過不如寫過嘛,所以通過這麼“折騰”的專案,能夠學習到很多東西哦,希望能對大家有一點點幫助,有問題也歡迎各位與我交流!!!

主要技術棧 : vue vuex axios scss vant 

網易雲音樂介面:NeteaseCloudMusicApi 這個真好,感謝大佬提供!

原始碼地址:vue-vant-douban-wangyi 如果各位覺得還不錯的話,麻煩給我個start鼓勵下哈!!感謝各位!!!

線上預覽  請在移動模式下瀏覽

vue+vant同一專案實現豆瓣電影加網易雲音樂webapp-最佳練手專案

一些圖片:

一 歡迎頁 骨架屏

vue+vant同一專案實現豆瓣電影加網易雲音樂webapp-最佳練手專案     vue+vant同一專案實現豆瓣電影加網易雲音樂webapp-最佳練手專案

二 電影搜尋

vue+vant同一專案實現豆瓣電影加網易雲音樂webapp-最佳練手專案     vue+vant同一專案實現豆瓣電影加網易雲音樂webapp-最佳練手專案

三 電影 (列表、詳情、影人詳情)

vue+vant同一專案實現豆瓣電影加網易雲音樂webapp-最佳練手專案     vue+vant同一專案實現豆瓣電影加網易雲音樂webapp-最佳練手專案

vue+vant同一專案實現豆瓣電影加網易雲音樂webapp-最佳練手專案     vue+vant同一專案實現豆瓣電影加網易雲音樂webapp-最佳練手專案

四 音樂 (主頁、歌單、播放器)

vue+vant同一專案實現豆瓣電影加網易雲音樂webapp-最佳練手專案     vue+vant同一專案實現豆瓣電影加網易雲音樂webapp-最佳練手專案


 

vue+vant同一專案實現豆瓣電影加網易雲音樂webapp-最佳練手專案     vue+vant同一專案實現豆瓣電影加網易雲音樂webapp-最佳練手專案  

五 收藏 可拖拽mini播放器

vue+vant同一專案實現豆瓣電影加網易雲音樂webapp-最佳練手專案

功能介紹:

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增加請求前先取消前面請求的配置。

vue+vant同一專案實現豆瓣電影加網易雲音樂webapp-最佳練手專案


2019-3-22更新

1 加快電影詳情滑動速度

2 增加手動輸入城市

vue+vant同一專案實現豆瓣電影加網易雲音樂webapp-最佳練手專案

最後感謝各位!希望給個start鼓勵下哦  !!!


相關文章