1. 開啟電臺(tái)

2. 好友卡片

3. 引導(dǎo)頁（引導(dǎo)用戶用微信登錄QQ音樂或開啟冷啟動(dòng)）

4. 冷啟動(dòng)

5. 卡片詳情（好友相似度，好友偏好，評(píng)論）

6. 歌曲播放頁（播放暫停，歌詞滾動(dòng)，收藏歌曲，切換歌曲，聽歌流水上報(bào)，背景魔法色，適配）

7. miniplayer （切換歌曲，狀態(tài)同步）

核心功能實(shí)現(xiàn)

音頻狀態(tài)同步

涉及播放歌曲狀態(tài)同步，不能使用audio組件。而音頻播放API本質(zhì)上是借助微信native的播放組件。

使用wx.navigateTo() 跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面，會(huì)保留當(dāng)前頁面。點(diǎn)擊左上角返回，之前頁面會(huì)觸發(fā)onShow監(jiān)聽頁面顯示，不會(huì)觸發(fā)onLoad事件。播放頁和首頁miniplayer狀態(tài)同步相關(guān)邏輯處理應(yīng)該在onShow事件監(jiān)聽。

歌曲信息以及變更（包括歌曲列表，播放狀態(tài)，切換音頻，專輯圖，歌曲名，歌手等）存儲(chǔ)在小程序提供的storage下，方便不同頁面數(shù)據(jù)同步

歌詞滾動(dòng)

音頻組件API目前沒有提供類似audio的onTimeUpdate事件，需要開了一個(gè)定時(shí)器做歌詞滾動(dòng)，缺點(diǎn)是定時(shí)器做歌詞渲染有不太精準(zhǔn)。好消息是：微信后期會(huì)支持OnTimeUpdate事件。
歌詞處理相關(guān)邏輯如下：

歌詞背景魔法色

根據(jù)專輯圖拉取對(duì)應(yīng)十六進(jìn)制的魔法色。有些色值較亮，有點(diǎn)刺眼，這里需要對(duì)色值轉(zhuǎn)為HSL通過降低飽和度S和亮度L來使得背景色看著柔和。

將后臺(tái)返回十六進(jìn)制，轉(zhuǎn)為RGB值

RGB轉(zhuǎn)為HSL

降低HSL 中S飽和度，L亮度讓背景色不刺眼