- 引言
自己剛開始學微信小程式的時候，自己做着玩玩的。
現在分享出來給大家學習用用，如果覺得有借鑒意義，我的目的就算達到了。
- 成果
- 效果圖
廢話不多說，直接上效果圖：
這裡 本來是GIF的圖，但是太大了，隻有截圖喽
2.主要功能
歌曲清單加載、重新整理、更多、傳回頂部
歌曲播放，下一曲、上一曲、暫停、循環播放、單曲播放、清單播放
檢視歌曲封面圖檔、儲存封面圖檔
歌曲時間進度拖放，記錄播放進度
最近播放歌曲記錄，删除歌曲
分享歌曲
清空緩存
- 工具以及配置
調試：
微信開發者工具
編輯器：
Sublime Text
工程建構
使用wepy
(https://tencent.github.io/wepy/document.html#/)
項目源碼
github位址：
https://github.com/longyinzaitian/wechatminimusic
- 項目運作步驟
1 拷貝項目
git clone
https://github.com/longyinzaitian/wechatminimusic.git
cd wechatminimusic
//切換到工程檔案夾目錄下
npm install wepy-cli -g
//全局安裝或更新WePY指令行工具
npm install
//安裝依賴
wepy build --watch
//開啟編譯
// --watch參數可以不用加
// 加了之後會監聽檔案修改，實時編譯
2 微信開發者工具打開
第一步完成後，沒有異常，在項目目錄下回生成dist檔案夾
使用微信開發者工具打開dist檔案夾即可看到效果圖
- 項目難點
項目的重點在于歌曲播放界面。
1導圖
實作功能較多，邏輯有點複雜，是以就畫了一個導圖。
圖有點大，可能得放大看原圖。
從邏輯導圖上看，功能實作邏輯很複雜。原因在于歌曲播放界面入口有點多，并且需要記錄歌曲播放位置。
細說起來，歌曲播放界面入口有兩個：歌曲網絡清單 和 最近歌曲播放曆史清單。
這兩個清單，點選任意一個歌曲即可進入歌曲播放界面。那就兩種情況，點選進入的歌曲是目前正在播放的歌曲或者不是目前正在播放的歌曲。
如果是目前正在播放的歌曲，渲染歌曲目前播放進度。如果不是目前正在播放的歌曲，就拉取歌曲資訊，渲染播放界面，并添加到最近播放清單中。
2 歌曲API
目前能用的開放的歌曲API少之又少，項目中使用的是很早之前百度聽的API。
歌曲更新不及時，非常陳舊的API了。不過，這不是重點，能用即可。
3 微信API
(1)
歌曲播放主要用的是微信小程式BackgroundAudioManager 執行個體。
具體操作，可以參考微信小程式官方文檔。
這裡需要說明的是，微信小程式提供了其他兩個音頻播放元件
AudioContext 和 InnerAudioContext 元件。
這裡不用這兩個元件，因為這兩個都相當于是頁面内部元件。如果頁面沒有了，就不播放了，歌曲播放我們想要的效果是可以背景播放，而BackgroundAudioManager 就是實作音頻背景播放的。
(2)
緩存主要使用的是微信的Storage相關的API。接口簡單明了，存儲少量資料很友善。
(3)
歌曲清單下拉重新整理，使用微信小程式的startPullDownRefresh接口，微信頁面頂部就會出現重新整理的小動畫，然後業務完成重新整理邏輯， 完成之後，調用stopPullDownRefresh接口停止重新整理，隐藏頁面頂部的重新整理小動畫。
需要注意的是，當頁面需要使用重新整理功能的API是，需配置目前頁面的
enablePullDownRefresh屬性為enable。(配置在page.wpy的config中，下文說明)
(4)
小程式頁面頂部樣式，預設是白色的背景，項目中使用的紅色背景，怎麼設定的呢？
微信小程式允許設定頁面頂部樣式，頁面配置中navigationBarBackgroundColor屬性可以設定頁面頂部的顔色。更改該值，即可自定義頁面頂部的背景顔色。(配置在page.wpy的config中，下文說明)
navigationBarTitleText 可自定義頁面頂部的标題。(配置在page.wpy的config中，下文說明)
- WEPY
項目開發過程中，不直接使用微信的那一套，太繁瑣，并且開發者功能編輯功能也不強大，僅僅作為調試即可。
真正開發使用的是wepy或者mpvue。
wepy的官網是：
https://tencent.github.io/wepy/index.html
mpvue的官網是：
http://mpvue.com/mpvue/quickstart/
前者是騰訊開發的，後者是vue團隊做的，各有優劣，自由選擇。
如果熟悉vue，那麼開發小程式使用mpvue将是個不錯的選擇。但是wepy也很不錯，體積特别小，功能完備，騰訊諸多小程式都在使用。其實也不用做過多的選擇，用起來都很簡單，上手很快。
項目中使用的wepy，是以以wepy為主分析。
我這裡主要說明一下wepy的page.wpy，其他資訊，請學習wepy。
page.wpy對應于每一個頁面，上面提到的頁面頂部樣式自定義、頁面頂部标題自定義等，都是在page.wpy中的config中修改完成的。
當然，page.wpy并不是說名字一定是page，可以是其他任何你認為有意義的名字，app.wpy是小程式的入口，該檔案内配置了小程式所必須的配置資訊。頁面配置、tab配置、視窗樣式配置等等。
總的來說，wepy中每一個page完成一個頁面，以頁面為機關完成小程式邏輯。
- 總結
總的來說，小程式很簡單，上手很快，難度不大。大家有什麼問題，可以評論區留言。
另外需要注意的是，appid的申請，微信預設一個微信賬号隻能管理五個小程式或者小遊戲。這個項目大家沒有申請也可以跑起來，在debug模式下跑是沒有問題的。
如果大家使用開發者工具運作代碼，出現以下錯誤：
解決辦法是：
打開微信開發者工具的項目詳情頁面(右上角位置)，勾選“不校驗合法域名、webview、TLS版本以及HTTPS證書”。 然後點選 “編譯” 按鈕即可。
源碼下載下傳，請點選閱讀原文。