一 項目展示

二 項目結(jié)構(gòu)

2.1 項目說明

• 音樂推薦：用于向用戶推薦一些熱門的音樂
• 播放器：用于顯示當前播放的時間和進度，用戶可以跳轉(zhuǎn)進度
• 播放列表：用于顯示當前播放的曲目列表，用戶可以進行曲目切換

2.2 頁面結(jié)構(gòu)

小程序的頁面由上、中、下三個區(qū)域組成。為了更好地描述這3個區(qū)域，下面將它們分別命名為tab、content和player

• tab區(qū)域：用于顯示顯示"音樂播放"、“播放器”、"播放列表"這3個標簽頁的標題。如果當前位于某個標簽頁下，該標簽頁的標題文字就會顯示為紅色，并且標題文字下方的線條會顯示為紅色，而其他標簽頁的文字和線條都顯示為白色
• content區(qū)域：通過左右滑動，可以實現(xiàn)標簽頁的切換
• player區(qū)域：用于顯示當前播放的音樂信息，并且提供了3個按鈕，功能依次為"打開播放列表"、"播放/暫停"和切換到下一曲

2.3 目錄結(jié)構(gòu)

目錄結(jié)構(gòu)

路徑說明app.js應(yīng)用程序的邏輯文件app.json應(yīng)用程序的配置文件pages/index/index.jsindex頁面的邏輯文件pages/index/index.jsonindex頁面的配置文件pages/index/index.wxssindex頁面的樣式文件pages/index/wxmlindex頁面的結(jié)構(gòu)文件pages/index/info.wxml"音樂推薦"標簽頁的結(jié)構(gòu)文件pages/index/play.wxml"播放器"標簽頁的結(jié)構(gòu)文件pages/index/playlist.wxml"播放列表"標簽頁結(jié)構(gòu)文件images圖片文件

說明

• 上表實際只有一個頁面，即pages/index/index，wxml結(jié)構(gòu)被拆分成了4個文件，分別是index.wxml、info.wxml、play.wxml和playlist.wxml，整體頁面結(jié)構(gòu)代碼在index.wxml中編寫
• content區(qū)域使用了標簽頁，而不同的標簽頁對應(yīng)不同的布局結(jié)構(gòu)，所以拆分到了3個wxml文件中，從而避免一個頁面的嵌套層級過多，導致代碼難易閱讀和維護