功能介紹

通過前幾節的學習，我們對完成一個應用已經有了一些自己的心得。在此再次再制作一個小的音樂小程序應用。該應用一共分為首頁、榜單頁、音樂分享頁和音樂搜索頁。

首頁：

榜單內容頁：

音樂分享頁：

音樂搜索頁：

我們先完成首頁的頁面制作，再逐步完成整個項目。

一、音樂分享小程序首頁制作

首頁一共分為頂部標題欄、搜索欄、海報欄以及榜單塊：

在標題欄中為了簡化結構，一共包括了頂部用戶信息和音樂搜索框。首先新建一個行，命名為登錄狀態/搜索，在其下創建兩個行一個命名為個人信息與音樂搜索：

將個人信息、音樂搜索的垂直對齊設置為居中，使其元素可以居中顯示。

隨后在個人信息行中創建 3 個行，用于顯示左側、中部、右側信息，依次設置這些行的寬度為 10%、50%、40%：

隨后在左側行中添加一個圖片，設置寬度為 100%，占據整個左側行內容、中部行添加一個文本并且設置與坐標的左內邊距為 10、右側設置右內邊距為 10、水平對齊靠右并往其中添加一個按鈕：

隨后將會顯示如下效果：

接下來設置音樂搜索行的水平對齊為居中，往其內部添加一個搜索框，設置寬度為 90%：

最后標題欄呈現如下：

接下來完成一個廣告圖區，廣告圖需要插件一個行，設置其上、下、左、右內邊距為10，隨后往內部添加一個圖片組件，設置圖片組件的大小為 100% 即可：

當前頁面顯示效果如下：

最后完成榜單內容的制作，在此添加一個行命名為榜單內容，在榜單內容下添加兩個行，命名為左側和右側：

設置榜單內容的左右內邊距為 10，隨后設置左側與右側的寬度分別為 38%與64%。接著往左側列中添加一個圖片，設置寬度為 100，右側列中添加一個行，命名為歌名：

此時頁面顯示效果如下：

接下來往歌名行中添加 4 個如下對象樹中的組件：

在此還需要設置右側的豎直對齊方式為 space-between 均分：

隨后我們再復制 3 個歌名列：

此時頁面效果如下：

在此我們只需要復制 3 個內容行，更改圖片內容即可：

二、音樂分享小程序榜單頁制作

榜單內容頁制作比較簡單我們，可以查看一下頁面所框選的內容分為幾個塊：

首先我們需要更改該頁面的背景色為某個榜單顏色相近的顏色：

隨后在榜單內容下創建一個標題行，標題行下創建一個信息列，在信息列下創建一個小標題行：

接著在小標題行中添加兩個文本，一個內容為 iVX，另外一個內容為榜單：

此時頁面呈現效果如下：

接著繼續在列中創建一個文本和一個返回首頁按鈕：

此時的頁面效果如下：

接下來繼續創建該頁面的內容區，創建一個行命名為歌曲內容，在歌曲內容下創建一個歌曲內容行，歌曲內容行下有一個歌曲內容行與一個標題行：

在此時更改最外側的歌曲內容行的圓角值為 38，且底部不顯示：

此時頁面能顯示效果如下：

接著在標題欄中添加一個文本，顯示為標題：

接著在歌曲內容行下添加 3 個列，命名為序號、歌曲信息、播放，并且在歌曲信息列下創建兩個行，一個命名為作者另一個命名為歌名：

接下來往這些相應的行列中添加所需的元素：

接下來設置這些對應內容的寬度和內外邊距，隨后頁面將會呈現如下效果：

三、音樂分享小程序分享頁與搜索頁制作

音樂分享頁與榜單頁類似，頁面效果如下：

在此我們復制榜單頁，更改標題內容并且刪除多余內容，此時頁面將會顯示如下：

隨后添加幾個輸入框和一個按鈕即可，如何操作不再贅述：

接下來開始制作搜索頁，搜索頁與首頁內容類似，復制一個頁面重命名為音樂搜索頁，刪除榜單內容，將榜單頁中的歌曲每條樣式復制到當前頁面中：

搜索頁與音樂分享頁都是由其他頁面改動而成，重復內容在此不再贅述，下面將實現該小程序的功能。

四、功能實現

4.1 登陸功能實現

在首頁的標題欄中需要顯示登陸用戶的頭像與昵稱，此時發起小程序登陸，需要在后臺中添加私有用戶組件，使用私有用戶組件完成用戶的登陸操作。在此添加一個私有用戶到后臺，重命名為用戶：

隨后給登陸按鈕添加事件，并在前臺創建兩個變量用于接收用戶的頭像和昵稱：

登陸后由于標題欄中的圖片需要顯示用戶頭像、文本需要顯示用戶昵稱，在此為其綁定數據為用戶頭像和用戶昵稱變量內容：

此時用戶登錄按鈕應該換成分享頁面的按鈕，點擊可以跳到分享音樂頁面中。需要完成這個需求需要在頁面中添加 if 組件，設置用戶昵稱默認值為未登錄，當用戶昵稱為未登錄時顯示立即登錄按鈕，當用戶昵稱不等于未登錄時，顯示分享頁面跳轉按鈕：

此時在分享音樂中添加點擊事件，將其點擊后需要跳轉到分享頁面：

4.2 分享功能實現

此時為了方便數據顯示，我們先為當前小程序應用添加數據的提交服務，為其添加該服務我們需要插件一個私有數據庫存放歌曲內容：

此時為其添加字段為歌手、歌名、播放數、音樂鏈接：

隨后添加一個服務命名為音樂上傳：

這個服務接收 3 個參數，分別是歌手、歌名、音樂鏈接：

隨后將其接收的參數傳入數據庫并且設置播放數的默認值為 0：

接下來在分享頁面的按鈕中添加點擊事件，點擊該按鈕將會使用音樂上傳服務，傳入所輸入的歌手、歌名和音樂鏈接名，接著添加失敗回調與成功回調為其添加對應的響應：

4.3 首頁數據顯示功能實現

首頁的 3 個榜單分別是熱歌、新歌以及原創，熱歌以播放數進行排列、新歌以時間順序做為排列、原創則隨機進行推薦。

在此創建熱歌服務命名為最熱榜單，在服務中使用數據庫進行數據輸出，設置輸出的函數為 1 到傳入的參數獲取數為一個范圍最終返回數據結果：

同理，最新榜單以及原創推薦榜單類似，在此貼出服務邏輯圖示：

接下來在首頁中創建 3 個對象變量，這 3 個對象變量用于接收數據榜單數據：

設置這些對象其列名為歌名、播放數、數據ID：

接下來設置首頁的初始化事件，在初始化時使用這些榜單服務，傳入獲取數為 3， 獲取到我們所需的內容使用對象變量進行接收：

此時我們刪除榜單中的多余歌名行，使用循環組件對齊進行創建：

設置不同的榜單的數據為循環創建的數據來源：

并且將其文本內容綁定為對應的內容：

4.4 首頁播放功能實現

此時歌曲數據獲取到了，將為其播放按鈕編寫播放功能。我們此時需要創建一個服務，通過ID查找音樂地址：

此服務只返回音樂鏈接列內容：

接著我們在首頁中添加一個音頻組件，隨后給播放按鈕設置事件：

此時點擊按鈕后將會使用音樂鏈接服務傳入當前的數據ID作為參數，獲取到音樂地址后，設置音頻的播放地址為返回內容，最后將音頻進行播放即可。

4.5 榜單頁功能實現

進入榜單頁需要點擊不同的榜單圖片進入：

我們給這些圖片設置不同的標志，點擊圖片后我們在前臺中創建一個變量命名為選擇類型，選擇類型點擊熱歌榜時為 1、點擊新歌榜時為 2、點擊原創榜時為 3，并且跳轉到榜單頁：

接下來給榜單頁創建一個初始化事件，通過選擇類型判斷榜單所選擇內容，并且通過內容設置當前頁面的背景色作為區分；最后將獲取的內容使用一個獲取內容對象數組進行接收：

獲取內容對象變量列名為：

接下來將歌曲內容存放到一個循環創建之中：

設置循環創建的數據來源為獲取內容變量：

隨后將播放按鈕根據首頁編寫的方式進行設定即可。

4.6 搜索頁功能實現

搜索頁的功能實現較為簡單，我們首先給首頁的音樂搜索輸入框設置一個點擊事件：

點擊后將會跳轉到搜索頁：

隨后創建一個搜索服務：

此服務接收一個參數為音樂名，隨后通過輸出時設置條件搜索歌名包含音樂名即可：

最后當點擊音樂搜索按鈕后啟動其服務使用搜索內容對象變量進行接收即可：

搜索變量列為如下：

最后使用循環遍歷顯示內容即可，并且通過與首頁相同方式為播放按鈕綁定播放時間即可完成該頁內容：