微信小程式-仿QQ音樂
- 歌曲來源: QQ音樂
說明
- 因為個人開發者無法釋出線上音樂播放小程式,所以開發該小程式目的只為學習小程式開發;
- 小程式涉及到到所有歌曲資源都來源於QQ音樂,部分API由本人對QQ音樂介面進行了二次封裝(我會另外再寫一篇文章專門用來分享API,敬請期待)
編輯器效果展示
- 因為要壓縮為GIF格式,所以加快了播放速度並且畫質有點差
真機截圖
- 推薦頁面
- 各大排行榜
- 搜尋頁面
- 歌手詳情頁
- 歌單(排行榜)詳情頁
- 播放器頁面
- 分享頁面
目前實現的功能
- 歌單
- 電臺
- 歌曲播放
- MV播放(最近發現QQ音樂的介面不返回MV資料了,所以這個功能暫時無法展示)
- 歌手列表
- 排行榜
- 歌曲歌手搜尋(支援模糊查詢)
- 最近搜尋記錄
- 熱門搜尋詞條
- 歌手詳情頁
- 歌單詳情頁
- 歌曲分享
- 檢視評論
- 歌詞滾動
- 最近播放歌曲
接下來準備實現的功能
- 使用者登入
- 私人FM
- 增加點贊,評論功能
- 歌曲播放方式(隨機,單曲,迴圈)
- 收藏
- 全域性播放器元件
專案目錄
- comment--自定義元件(播放器元件,開發中)
- img--存放圖片
- gedan--歌單頁
- index--首頁
- logs--歌手列表頁
- playSong--播放器頁
- rank--排行榜頁
- search--搜尋頁
- share--分享頁
- singer--歌手詳情頁
- top--歌單詳情頁
- app.js--應用程式邏輯
- app.json--應用程式配置
- app.wxss--應用程式公共樣式
app.json
應用程式配置檔案
{ "pages": [ "pages/index/index", "pages/logs/logs", "pages/rank/rank", "pages/search/search", "pages/gedan/gedan", "pages/playSong/playSong", "pages/singer/singer", "pages/top/top", "pages/share/share" ],//頁面路徑列表 "requiredBackgroundModes": [ "audio" ],//需要在後臺使用的能力,這裡我們使用到了【音樂播放】 "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "HMusic", "navigationBarTextStyle": "black" },//全域性到預設視窗表現 "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "推薦" }, { "pagePath": "pages/logs/logs", "text": "歌手" }, { "pagePath": "pages/rank/rank", "text": "排行榜" }, { "pagePath": "pages/playSong/playSong", "text": "播放器" } ], "position": "top" }//tab欄到表現,預設是放在底部,根據position,我們將其設定為頂部顯示 }
每個頁面都有各自到配置頁面,可以對各自頁面進行單獨對配置
[pageName].json用於指定頁面工作時,window的設定:
{ // 導航條背景色 "navigationBarBackgroundColor": "#fff", // 導航條前景色(只能是white/black) "navigationBarTextStyle": "black", // 導航條文字 "navigationBarTitleText": "HMusic", // 視窗背景顏色 "backgroundColor": "#fff", // 視窗前景色 "backgroundTextStyle": "dark", // 是否開啟下拉重新整理 "enablePullDownRefresh": false }
app.js應用程式邏輯
// App函式是一個全域性函式,用於建立應用程式物件 App({ // ========== 全域性資料物件(可以整個應用程式共享) ========== globalData: { ... }, // ========== 應用程式全域性方法 ========== method1 (p1, p2) { ... }, method2 (p1, p2) { ... }, // ========== 生命週期方法 ========== // 應用程式啟動時觸發一次 onLaunch () { ... }, // 當應用程式進入前臺顯示狀態時觸發 onShow () { ... }, // 當應用程式進入後臺狀態時觸發 onHide () { ... } })
歡迎Star GitHub