微信小程序-仿QQ音樂

• 歌曲來源：QQ音樂

說明

• 目前只有體驗版，若是有興趣的同窗能夠私聊我，我幫您加入，名額有限。
• 由於我的開發者沒法發佈在線音樂播放小程序，因此開發該小程序目的只爲學習小程序開發；
• 小程序涉及到到全部歌曲資源都來源於QQ音樂，部分API由本人對QQ音樂接口進行了二次封裝（我會另外再寫一篇文章專門用來分享API，敬請期待）

編輯器效果展現

• 由於要壓縮爲GIF格式，因此加快了播放速度而且畫質有點差

真機截圖

操做視頻

• 推薦頁面

• 歌手列表

• 各大排行榜

• 搜索頁面

• 歌手詳情頁

• 歌單（排行榜）詳情頁

• 播放器頁面

• 分享頁面

目前實現的功能

1. 歌單
2. 電臺
3. 歌曲播放
4. MV播放（最近發現QQ音樂的接口不返回MV數據了，因此這個功能暫時沒法展現）
5. 歌手列表
6. 排行榜
7. 歌曲歌手搜索（支持模糊查詢）
8. 最近搜索記錄
9. 熱門搜索詞條
10. 歌手詳情頁
11. 歌單詳情頁
12. 歌曲分享
13. 查看評論
14. 歌詞滾動
15. 最近播放歌曲

接下來準備實現的功能

1. 用戶登陸
2. 私人FM
3. 增長點贊，評論功能
4. 歌曲播放方式（隨機，單曲，循環）
5. 收藏
6. 全局播放器組件

項目目錄

![圖片描述][14]

1. comment--自定義組件（播放器組件，開發中）
2. img--存放圖片
3. gedan--歌單頁
4. index--首頁
5. logs--歌手列表頁
6. playSong--播放器頁
7. rank--排行榜頁
8. search--搜索頁
9. share--分享頁
10. singer--歌手詳情頁
11. top--歌單詳情頁
12. app.js--應用程序邏輯
13. app.json--應用程序配置
14. 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 () { ... }
})
複製代碼

歡迎StarGitHub 博客