十三、制作 iVX音乐分享小程序
功能介紹
通過前幾節(jié)的學(xué)習(xí)，我們對完成一個應(yīng)用已經(jīng)有了一些自己的心得。在此再次再制作一個小的音樂小程序應(yīng)用。該應(yīng)用一共分為首頁、榜單頁、音樂分享頁和音樂搜索頁。
首頁：
榜單內(nèi)容頁：
音樂分享頁：
音樂搜索頁：
我們先完成首頁的頁面制作，再逐步完成整個項目。
一、音樂分享小程序首頁制作
首頁一共分為頂部標(biāo)題欄、搜索欄、海報欄以及榜單塊：
在標(biāo)題欄中為了簡化結(jié)構(gòu)，一共包括了頂部用戶信息和音樂搜索框。首先新建一個行，命名為登錄狀態(tài)/搜索，在其下創(chuàng)建兩個行一個命名為個人信息與音樂搜索：
將個人信息、音樂搜索的垂直對齊設(shè)置為居中，使其元素可以居中顯示。
隨后在個人信息行中創(chuàng)建 3 個行，用于顯示左側(cè)、中部、右側(cè)信息，依次設(shè)置這些行的寬度為 10%、50%、40%：
隨后在左側(cè)行中添加一個圖片，設(shè)置寬度為 100%，占據(jù)整個左側(cè)行內(nèi)容、中部行添加一個文本并且設(shè)置與坐標(biāo)的左內(nèi)邊距為 10、右側(cè)設(shè)置右內(nèi)邊距為 10、水平對齊靠右并往其中添加一個按鈕：
隨后將會顯示如下效果：
接下來設(shè)置音樂搜索行的水平對齊為居中，往其內(nèi)部添加一個搜索框，設(shè)置寬度為 90%：
最后標(biāo)題欄呈現(xiàn)如下：
接下來完成一個廣告圖區(qū)，廣告圖需要插件一個行，設(shè)置其上、下、左、右內(nèi)邊距為10，隨后往內(nèi)部添加一個圖片組件，設(shè)置圖片組件的大小為 100% 即可：
當(dāng)前頁面顯示效果如下：
最后完成榜單內(nèi)容的制作，在此添加一個行命名為榜單內(nèi)容，在榜單內(nèi)容下添加兩個行，命名為左側(cè)和右側(cè)：
設(shè)置榜單內(nèi)容的左右內(nèi)邊距為 10，隨后設(shè)置左側(cè)與右側(cè)的寬度分別為 38%與64%。接著往左側(cè)列中添加一個圖片，設(shè)置寬度為 100，右側(cè)列中添加一個行，命名為歌名：
此時頁面顯示效果如下：
接下來往歌名行中添加 4 個如下對象樹中的組件：
在此還需要設(shè)置右側(cè)的豎直對齊方式為 space-between 均分：
隨后我們再復(fù)制 3 個歌名列：
此時頁面效果如下：
在此我們只需要復(fù)制 3 個內(nèi)容行，更改圖片內(nèi)容即可：
二、音樂分享小程序榜單頁制作
榜單內(nèi)容頁制作比較簡單我們，可以查看一下頁面所框選的內(nèi)容分為幾個塊：
首先我們需要更改該頁面的背景色為某個榜單顏色相近的顏色：
隨后在榜單內(nèi)容下創(chuàng)建一個標(biāo)題行，標(biāo)題行下創(chuàng)建一個信息列，在信息列下創(chuàng)建一個小標(biāo)題行：
接著在小標(biāo)題行中添加兩個文本，一個內(nèi)容為 iVX，另外一個內(nèi)容為榜單：
此時頁面呈現(xiàn)效果如下：
接著繼續(xù)在列中創(chuàng)建一個文本和一個返回首頁按鈕：
此時的頁面效果如下：
接下來繼續(xù)創(chuàng)建該頁面的內(nèi)容區(qū)，創(chuàng)建一個行命名為歌曲內(nèi)容，在歌曲內(nèi)容下創(chuàng)建一個歌曲內(nèi)容行，歌曲內(nèi)容行下有一個歌曲內(nèi)容行與一個標(biāo)題行：
在此時更改最外側(cè)的歌曲內(nèi)容行的圓角值為 38，且底部不顯示：
此時頁面能顯示效果如下：
接著在標(biāo)題欄中添加一個文本，顯示為標(biāo)題：
接著在歌曲內(nèi)容行下添加 3 個列，命名為序號、歌曲信息、播放，并且在歌曲信息列下創(chuàng)建兩個行，一個命名為作者另一個命名為歌名：
接下來往這些相應(yīng)的行列中添加所需的元素：
接下來設(shè)置這些對應(yīng)內(nèi)容的寬度和內(nèi)外邊距，隨后頁面將會呈現(xiàn)如下效果：
三、音樂分享小程序分享頁與搜索頁制作
音樂分享頁與榜單頁類似，頁面效果如下：
在此我們復(fù)制榜單頁，更改標(biāo)題內(nèi)容并且刪除多余內(nèi)容，此時頁面將會顯示如下：
隨后添加幾個輸入框和一個按鈕即可，如何操作不再贅述：
接下來開始制作搜索頁，搜索頁與首頁內(nèi)容類似，復(fù)制一個頁面重命名為音樂搜索頁，刪除榜單內(nèi)容，將榜單頁中的歌曲每條樣式復(fù)制到當(dāng)前頁面中：
搜索頁與音樂分享頁都是由其他頁面改動而成，重復(fù)內(nèi)容在此不再贅述，下面將實(shí)現(xiàn)該小程序的功能。
四、功能實(shí)現(xiàn)
4.1 登陸功能實(shí)現(xiàn)
在首頁的標(biāo)題欄中需要顯示登陸用戶的頭像與昵稱，此時發(fā)起小程序登陸，需要在后臺中添加私有用戶組件，使用私有用戶組件完成用戶的登陸操作。在此添加一個私有用戶到后臺，重命名為用戶：
隨后給登陸按鈕添加事件，并在前臺創(chuàng)建兩個變量用于接收用戶的頭像和昵稱：
登陸后由于標(biāo)題欄中的圖片需要顯示用戶頭像、文本需要顯示用戶昵稱，在此為其綁定數(shù)據(jù)為用戶頭像和用戶昵稱變量內(nèi)容：
此時用戶登錄按鈕應(yīng)該換成分享頁面的按鈕，點(diǎn)擊可以跳到分享音樂頁面中。需要完成這個需求需要在頁面中添加 if 組件，設(shè)置用戶昵稱默認(rèn)值為未登錄，當(dāng)用戶昵稱為未登錄時顯示立即登錄按鈕，當(dāng)用戶昵稱不等于未登錄時，顯示分享頁面跳轉(zhuǎn)按鈕：
此時在分享音樂中添加點(diǎn)擊事件，將其點(diǎn)擊后需要跳轉(zhuǎn)到分享頁面：
4.2 分享功能實(shí)現(xiàn)
此時為了方便數(shù)據(jù)顯示，我們先為當(dāng)前小程序應(yīng)用添加數(shù)據(jù)的提交服務(wù)，為其添加該服務(wù)我們需要插件一個私有數(shù)據(jù)庫存放歌曲內(nèi)容：
此時為其添加字段為歌手、歌名、播放數(shù)、音樂鏈接：
隨后添加一個服務(wù)命名為音樂上傳：
這個服務(wù)接收 3 個參數(shù)，分別是歌手、歌名、音樂鏈接：
隨后將其接收的參數(shù)傳入數(shù)據(jù)庫并且設(shè)置播放數(shù)的默認(rèn)值為 0：
接下來在分享頁面的按鈕中添加點(diǎn)擊事件，點(diǎn)擊該按鈕將會使用音樂上傳服務(wù)，傳入所輸入的歌手、歌名和音樂鏈接名，接著添加失敗回調(diào)與成功回調(diào)為其添加對應(yīng)的響應(yīng)：
4.3 首頁數(shù)據(jù)顯示功能實(shí)現(xiàn)
首頁的 3 個榜單分別是熱歌、新歌以及原創(chuàng)，熱歌以播放數(shù)進(jìn)行排列、新歌以時間順序做為排列、原創(chuàng)則隨機(jī)進(jìn)行推薦。
在此創(chuàng)建熱歌服務(wù)命名為最熱榜單，在服務(wù)中使用數(shù)據(jù)庫進(jìn)行數(shù)據(jù)輸出，設(shè)置輸出的函數(shù)為 1 到傳入的參數(shù)獲取數(shù)為一個范圍最終返回數(shù)據(jù)結(jié)果：
同理，最新榜單以及原創(chuàng)推薦榜單類似，在此貼出服務(wù)邏輯圖示：
接下來在首頁中創(chuàng)建 3 個對象變量，這 3 個對象變量用于接收數(shù)據(jù)榜單數(shù)據(jù)：
設(shè)置這些對象其列名為歌名、播放數(shù)、數(shù)據(jù)ID：
接下來設(shè)置首頁的初始化事件，在初始化時使用這些榜單服務(wù)，傳入獲取數(shù)為 3， 獲取到我們所需的內(nèi)容使用對象變量進(jìn)行接收：
此時我們刪除榜單中的多余歌名行，使用循環(huán)組件對齊進(jìn)行創(chuàng)建：
設(shè)置不同的榜單的數(shù)據(jù)為循環(huán)創(chuàng)建的數(shù)據(jù)來源：
并且將其文本內(nèi)容綁定為對應(yīng)的內(nèi)容：
4.4 首頁播放功能實(shí)現(xiàn)
此時歌曲數(shù)據(jù)獲取到了，將為其播放按鈕編寫播放功能。我們此時需要創(chuàng)建一個服務(wù)，通過ID查找音樂地址：
此服務(wù)只返回音樂鏈接列內(nèi)容：
接著我們在首頁中添加一個音頻組件，隨后給播放按鈕設(shè)置事件：
此時點(diǎn)擊按鈕后將會使用音樂鏈接服務(wù)傳入當(dāng)前的數(shù)據(jù)ID作為參數(shù)，獲取到音樂地址后，設(shè)置音頻的播放地址為返回內(nèi)容，最后將音頻進(jìn)行播放即可。
4.5 榜單頁功能實(shí)現(xiàn)
進(jìn)入榜單頁需要點(diǎn)擊不同的榜單圖片進(jìn)入：
我們給這些圖片設(shè)置不同的標(biāo)志，點(diǎn)擊圖片后我們在前臺中創(chuàng)建一個變量命名為選擇類型，選擇類型點(diǎn)擊熱歌榜時為 1、點(diǎn)擊新歌榜時為 2、點(diǎn)擊原創(chuàng)榜時為 3，并且跳轉(zhuǎn)到榜單頁：
接下來給榜單頁創(chuàng)建一個初始化事件，通過選擇類型判斷榜單所選擇內(nèi)容，并且通過內(nèi)容設(shè)置當(dāng)前頁面的背景色作為區(qū)分；最后將獲取的內(nèi)容使用一個獲取內(nèi)容對象數(shù)組進(jìn)行接收：
獲取內(nèi)容對象變量列名為：
接下來將歌曲內(nèi)容存放到一個循環(huán)創(chuàng)建之中：
設(shè)置循環(huán)創(chuàng)建的數(shù)據(jù)來源為獲取內(nèi)容變量：
隨后將播放按鈕根據(jù)首頁編寫的方式進(jìn)行設(shè)定即可。
4.6 搜索頁功能實(shí)現(xiàn)
搜索頁的功能實(shí)現(xiàn)較為簡單，我們首先給首頁的音樂搜索輸入框設(shè)置一個點(diǎn)擊事件：
點(diǎn)擊后將會跳轉(zhuǎn)到搜索頁：
隨后創(chuàng)建一個搜索服務(wù)：
此服務(wù)接收一個參數(shù)為音樂名，隨后通過輸出時設(shè)置條件搜索歌名包含音樂名即可：
最后當(dāng)點(diǎn)擊音樂搜索按鈕后啟動其服務(wù)使用搜索內(nèi)容對象變量進(jìn)行接收即可：
搜索變量列為如下：
最后使用循環(huán)遍歷顯示內(nèi)容即可，并且通過與首頁相同方式為播放按鈕綁定播放時間即可完成該頁內(nèi)容：
總結(jié)
以上是生活随笔為你收集整理的十三、制作 iVX音乐分享小程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 十一、飞机大战（IVX 快速开发教程）
- 下一篇： 【iVX 初级工程师培训教程 10篇文拿