微信小程序-仿QQ音樂

Faremax 發布于2019-07-01 11:15 / 670人閱讀

摘要：歌曲來源音樂說明目前只有體驗版，如果有興趣的同學可以私聊我，我幫您加入，名額有限。

歌曲來源：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 () { ... }
})

歡迎StarGitHub 博客

GPU云服務器云服務器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/30028.html

微信小程序資源匯總

awesome-github-wechat-weapp 是由OpenDigg整理并維護的微信小程序開源項目庫集合。我們會定期同步上的項目到這里，也歡迎各位 UI組件開發框架實用庫開發工具服務端項目實例Demo UI組件 weui-wxss ★1873 - 同微信原生視覺體驗一致的基礎樣式庫zanui-weapp ★794 - 好用易擴展的小程序 UI 庫wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 評論0 收藏0
指尖一點歌聲來--微信小程序之仿網易云音樂心得

摘要：為了提高自己，最近在學習微信小程序，選題是仿網易云音樂。查文檔發現，小程序中圖片加載完成后，有一個加載完成事件。前者在微信客戶端版本就不開始維護了，后者低版本需做兼容處理。目前還有一些功能暫未實現，會在以后繼續完善項目，繼續學習。為了提高自己，最近在學習微信小程序，選題是仿網易云音樂。期間踩過了大把的坑，bug出現的難受和解決bug歡喜，一直是伴隨我階段性學習這個項目的心情。初步完成...

KitorinZero 2019-08-22 11:18 評論0 收藏0
在微信小程序使用音樂api的方法，以及微信小程序播放背景音樂失敗的解決方案匯總

摘要：下一步準備使用網易云代替音樂。已經開發新的網易云代替音樂了，需要的可以看看這篇文章為微信小程序開發的網易云音樂庫項目要做一個可以為日記添加音樂的小程序，所以要用到音樂api，參考了一些文章后我們封裝了一個qq音樂api庫（完成了動態token獲取，音樂搜索，音樂專輯圖片，音樂名稱，歌手名稱，播放），有需要的可以到Github自提。小程序qq音樂api庫Gihub地址https://...

Sleepy 2019-08-23 17:16 評論0 收藏0
微信小程序實戰（一）之仿美麗說

摘要：被美麗說少女粉吸引，就想著自己也寫一個來練練手，正好最近在學習微信小程序。微信小程序的組件真的很強大，以前寫圖片切換功能都好麻煩，小圓點的切換都要自己寫。被美麗說少女粉吸引，就想著自己也寫一個來練練手，正好最近在學習微信小程序。接下來讓我們分享一下我的學習歷程吧！選題其實糾結了好久該仿什么，看到別人都寫的差不多了，自己卻還沒有動手，很著急，那兩天一直在思考在查找，弄得自己特別煩躁...

wangdai 2019-08-02 16:00 評論0 收藏0