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鼓勵下哦!

相關文章
相關標籤/搜索