微信小程式-仿QQ音樂

騰訊音樂 · 發表 2019-01-24 19:04:13

摘要：歌曲來源： QQ音樂說明因為個人開發者無法釋出線上音樂播放小程式，所以開發該小程式目的只為學習小程式開發；小程式涉及到到所有歌曲資源都來源於QQ音樂，部分API由本人對QQ音樂介面進行了二次封裝（我會另外再寫一篇文章專門用來分享API，敬請期待） ...

歌曲來源： 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