1. 開啟(qi)電臺

2. 好(hao)友卡(ka)片(pian)

3. 引導(dao)頁（引導(dao)用戶用微信(xin)登(deng)錄QQ音(yin)樂(le)或開(kai)啟(qi)冷啟(qi)動）

4. 冷啟動

5. 卡片詳情（好友相似度，好友偏好，評論）

6. 歌曲播放頁（播放暫停，歌(ge)詞滾動，收藏歌(ge)曲，切換歌(ge)曲，聽(ting)歌(ge)流水上報，背景(jing)魔(mo)法色(se)，適配）

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

核心(xin)功(gong)能實現

音頻狀態同步

涉(she)及(ji)播(bo)放(fang)歌曲狀態同步(bu)，不能使用(yong)audio組(zu)件(jian)。而音頻播(bo)放(fang)API本質上(shang)是借助微信native的播(bo)放(fang)組(zu)件(jian)。

使用wx.navigateTo() 跳轉(zhuan)到應用內的某個頁(ye)(ye)面(mian)(mian)，會(hui)保留當前(qian)頁(ye)(ye)面(mian)(mian)。點擊左上角返回，之前(qian)頁(ye)(ye)面(mian)(mian)會(hui)觸發(fa)(fa)onShow監(jian)(jian)聽頁(ye)(ye)面(mian)(mian)顯示(shi)，不會(hui)觸發(fa)(fa)onLoad事件(jian)。播放頁(ye)(ye)和(he)首頁(ye)(ye)miniplayer狀態同步相關邏輯(ji)處理應該在onShow事件(jian)監(jian)(jian)聽。

歌曲信息以及變更（包括歌曲列表，播放狀態，切換音(yin)頻，專(zhuan)輯(ji)圖，歌曲名，歌手(shou)等）存儲(chu)在小程(cheng)序提供的storage下，方(fang)便不同(tong)(tong)頁面(mian)數據同(tong)(tong)步

歌詞滾動

音頻組件API目前沒有提供類似audio的onTimeUpdate事件，需要開了一個定時器做歌詞滾動，缺點是定時器做歌詞渲染有不太精準。好消息是：微信后期會支持OnTimeUpdate事件。
歌詞處理相關邏輯如下：

歌詞背景魔法色

根據專輯(ji)圖拉取對應十六進制的(de)魔法色(se)。有些色(se)值較亮(liang)，有點刺眼，這里需要對色(se)值轉為HSL通過降低飽和(he)度(du)(du)S和(he)亮(liang)度(du)(du)L來(lai)使得背(bei)景(jing)色(se)看著柔和(he)。

將(jiang)后(hou)臺(tai)返回(hui)十(shi)六進制，轉為RGB值

RGB轉為HSL

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