PAGE基于微信小程序音樂(lè)社區(qū)的設(shè)計(jì)與實(shí)現(xiàn)內(nèi)容摘要5G發(fā)展正當(dāng)其實(shí)，娛樂(lè)方面欣欣向榮，聽(tīng)音樂(lè)可以使我們?cè)诰裆钌细映溆饋?lái)。文化是民族的精神命脈，文藝是時(shí)代的號(hào)角，音樂(lè)在我們精神生活過(guò)程中不可或缺。而各個(gè)平臺(tái)都是我們獲取音樂(lè)信息的一個(gè)重要途徑。當(dāng)前市場(chǎng)上網(wǎng)站，APP等工具五花八門，在時(shí)代大背景下，許多音樂(lè)軟件承擔(dān)的不再是單一的聽(tīng)歌功能，功能龐大的同時(shí)顯得臃腫，以及現(xiàn)有的小程序在多媒體音樂(lè)上份額不足，還有開(kāi)屏廣告等操作，降低用戶體驗(yàn)滿意度。而小程序得天獨(dú)厚的用戶群，是一個(gè)具備高覆蓋性、高擴(kuò)展性以及簡(jiǎn)單便捷實(shí)用的“一站式”平臺(tái)。依托微信大量的用戶群體實(shí)現(xiàn)更好的推廣效果，不用下載即可使用，用完即走，觸手可及，滿足用戶使用的基本功能。本文設(shè)計(jì)的是一個(gè)基于微信小程序的音樂(lè)社區(qū)的平臺(tái),在微信端登錄就可以直接體驗(yàn),享受到音樂(lè)的視聽(tīng)盛宴。小程序開(kāi)發(fā)過(guò)程中使用了WXML、JavaScript、Vue等語(yǔ)言完成小程序的開(kāi)發(fā),使用vscode軟件完成管理后臺(tái)Vue-admin-template業(yè)務(wù)邏輯的開(kāi)發(fā)工作,同時(shí)使用網(wǎng)易云音樂(lè)的API接口獲取歌曲數(shù)據(jù),將歌曲數(shù)據(jù)存儲(chǔ)在小程序云開(kāi)發(fā)的云數(shù)據(jù)庫(kù)中。該小程序?qū)崿F(xiàn)用戶的登陸、音樂(lè)的播放、歌曲的搜索、觀看歌曲MV、暫停/播放功能、歌曲時(shí)長(zhǎng)進(jìn)度條展示、播放進(jìn)度和歌詞同步顯示,發(fā)布動(dòng)態(tài)等功能,滿足用戶聽(tīng)音樂(lè)的基本需求。關(guān)鍵詞：小程序音樂(lè)播放器云開(kāi)發(fā)目錄TOC\o"1-2"\h\z\u1緒論 11.1小程序開(kāi)發(fā)背景 11.2系統(tǒng)開(kāi)發(fā)的意義 12相關(guān)理論和技術(shù)的介紹 22.1微信小程序 22.2微信開(kāi)發(fā)者工具 22.3小程序云開(kāi)發(fā) 33系統(tǒng)分析 33.1可行性分析 33.2需求分析 44平臺(tái)設(shè)計(jì) 54.1平臺(tái)功能模塊設(shè)計(jì) 54.2平臺(tái)結(jié)構(gòu)設(shè)計(jì) 94.3數(shù)據(jù)庫(kù)設(shè)計(jì) 105音樂(lè)社區(qū)小程序功能實(shí)現(xiàn) 165.1首頁(yè)發(fā)現(xiàn)界面實(shí)現(xiàn) 165.2搜索界面實(shí)現(xiàn) 175.3視頻界面實(shí)現(xiàn) 185.4播放界面實(shí)現(xiàn) 195.5歌單廣場(chǎng)界面實(shí)現(xiàn) 205.6博客界面實(shí)現(xiàn) 215.7我的界面實(shí)現(xiàn) 225.8排行榜界面實(shí)現(xiàn) 225.9管理員后臺(tái)管理實(shí)現(xiàn) 236系統(tǒng)測(cè)試 256.1測(cè)試目的 256.2測(cè)試內(nèi)容 256.3測(cè)試用例 256.4測(cè)試結(jié)果 26結(jié)論 27參考文獻(xiàn) 28致謝 29附錄 30

1緒論1.1小程序開(kāi)發(fā)背景互聯(lián)網(wǎng)背景下的流量成本居高不下，APP作為一個(gè)閉環(huán)生態(tài)，用戶的的粘著性降低。而小程序打開(kāi)方便，依托微信，占用內(nèi)存小，為APP發(fā)展的瓶頸期提供了一個(gè)破題點(diǎn)，為用戶帶來(lái)更加多樣化、人性化的服務(wù)。小程序入門簡(jiǎn)單，和其他語(yǔ)言相比，開(kāi)發(fā)周期短，開(kāi)發(fā)者即使不具備豐富的開(kāi)發(fā)經(jīng)驗(yàn)，依靠官方提供的開(kāi)發(fā)文檔，就能輕易上手，同時(shí)微信官方提供的模板庫(kù)和可視化開(kāi)發(fā)，極大的縮短了開(kāi)發(fā)時(shí)間，百度、騰訊也給小程序提供許多封裝好的接口和第三方服務(wù)，與APP相比，小程序開(kāi)發(fā)成本低廉，其用戶體驗(yàn)和留存率都比較好，為用戶帶來(lái)全新的體驗(yàn)感。在2017年年底推出的“跳一跳”小程序，打響了微信小程序成名的第一槍，小程序也躍升成為熱門的話題之一。作為微信當(dāng)中重要的一項(xiàng)功能，它涵蓋了生活的方方面面，娛樂(lè)、休閑等服務(wù)數(shù)不勝數(shù)。商家可以采取發(fā)放紅包、參與活動(dòng)等手段，實(shí)現(xiàn)分享裂變的效應(yīng)，讓用戶主動(dòng)分享商家的小程序，實(shí)現(xiàn)為商家漲粉引流的目的，所以小程序是非常強(qiáng)大的營(yíng)銷工具之一。1.2系統(tǒng)開(kāi)發(fā)的意義在時(shí)代發(fā)展的潮流中發(fā)展，5G時(shí)代的帶來(lái)，音樂(lè)版權(quán)一家獨(dú)大，版權(quán)保護(hù)如火如荼，聽(tīng)歌本來(lái)是一件單純的事，但對(duì)于平臺(tái)卻不僅僅于此，版權(quán)所帶來(lái)的是流量是商家趨之若鶩的存在?，F(xiàn)在，我們習(xí)慣為版權(quán)付費(fèi)，而多家平臺(tái)的“獨(dú)家記憶”卻給用戶帶來(lái)了煩惱，只有在特定的平臺(tái)才能消費(fèi)，可能今天可以聽(tīng)某首歌，明天就找不到了。因此，對(duì)小程序來(lái)說(shuō)，這將是一個(gè)簡(jiǎn)單的選擇，不需要下載，何時(shí)何地都可以使用；對(duì)用戶來(lái)說(shuō)，不會(huì)為了聽(tīng)一首歌，去特地下載APP。想要實(shí)現(xiàn)聽(tīng)歌自由，小程序可以但此重任。故在認(rèn)真分析了當(dāng)下的市場(chǎng)情況以及做了充分的調(diào)研后選擇了使用微信小程序來(lái)開(kāi)發(fā)一款基于微信小程序的音樂(lè)播放器。2相關(guān)理論和技術(shù)的介紹隨著技術(shù)的迭代和APP功能的蝶變，功能更加強(qiáng)大的同時(shí)，APP的新用戶卻越來(lái)越少，用戶的增長(zhǎng)率增長(zhǎng)緩慢，隨之而來(lái)的是瓶頸期。而前端技術(shù)的成熟和云存儲(chǔ)發(fā)展的浪潮，席卷了互聯(lián)網(wǎng)，微信小程序應(yīng)運(yùn)而生。2.1微信小程序圖2-1微信小程序架構(gòu)?小程序由HTML、CSS、JS等搭建成一個(gè)獨(dú)立的框架，在小程序的運(yùn)行框架下演變成WXML和WXSS，本質(zhì)上還是基于web規(guī)范構(gòu)建而成。一個(gè)小程序由多個(gè)界面組成，完整的小程序需要page下四個(gè)配置文件與之對(duì)應(yīng)。一個(gè)完整小程序通常包括View視圖層和AppService邏輯層，視圖層實(shí)現(xiàn)頁(yè)面數(shù)據(jù)的渲染，數(shù)據(jù)流和API在邏輯層工作，實(shí)現(xiàn)數(shù)據(jù)的交互。在系統(tǒng)層面上，開(kāi)發(fā)者通過(guò)系統(tǒng)層實(shí)現(xiàn)各層級(jí)之間的通信，給予底層支持。2.2微信開(kāi)發(fā)者工具微信開(kāi)發(fā)者工具是由微信開(kāi)發(fā)的，設(shè)計(jì)簡(jiǎn)潔，對(duì)開(kāi)發(fā)者十分友好，官方提供微信開(kāi)放文檔、微信公眾平臺(tái)以及開(kāi)發(fā)者社區(qū)供開(kāi)發(fā)者參考，開(kāi)發(fā)者可以自己當(dāng)管理員和運(yùn)營(yíng)人員，降低了開(kāi)發(fā)的門檻。集開(kāi)發(fā)程序、調(diào)試bug、發(fā)布于一體，開(kāi)發(fā)者不用浪費(fèi)多余的精力去學(xué)習(xí)其他軟件的操作。軟件頁(yè)面擁有模擬器、編輯器、調(diào)試器、可視化和云開(kāi)發(fā)區(qū)域。模擬器可以模擬代碼在真機(jī)上的運(yùn)行情況，直觀呈現(xiàn)代碼所展現(xiàn)的界面；開(kāi)發(fā)者開(kāi)可以任意安裝插件，美化代碼結(jié)構(gòu)，優(yōu)化代碼質(zhì)量。2.3小程序云開(kāi)發(fā)基于原生serverless云服務(wù)的小程序云開(kāi)發(fā)，可免鑒權(quán)調(diào)用微信接口?？梢詷?gòu)建多端服務(wù)；除小程序外，支持小游戲、網(wǎng)頁(yè)多種功能形態(tài)的開(kāi)發(fā)業(yè)務(wù)。傳統(tǒng)開(kāi)發(fā)模式中，需要開(kāi)發(fā)者考慮方面過(guò)于繁瑣，因而開(kāi)發(fā)效率偏低。而云開(kāi)發(fā)提供云端數(shù)據(jù)庫(kù)，開(kāi)發(fā)者只需了解基本知識(shí)就可以操作，降低了學(xué)習(xí)門檻，提供基礎(chǔ)讀寫，實(shí)時(shí)推送，便于開(kāi)發(fā)者快速構(gòu)建云上資源；云函數(shù)實(shí)現(xiàn)代碼的云端管理，開(kāi)發(fā)者不需要購(gòu)買服務(wù)器，高效安全，開(kāi)發(fā)者既不需要搭建復(fù)雜服務(wù)器搭建，更不需要后期花費(fèi)多余的心力去維護(hù)，提高開(kāi)發(fā)的效率。3系統(tǒng)分析系統(tǒng)分析是發(fā)展的問(wèn)路石，因?yàn)橄到y(tǒng)分析確定了平臺(tái)的基本架構(gòu)、功能，所以系統(tǒng)必須進(jìn)行分類和優(yōu)化，以明確系統(tǒng)的功能構(gòu)成和性能需求；并明確系統(tǒng)的邏輯功能和信息流程。3.1可行性分析從技術(shù)可行性的角度看，開(kāi)發(fā)微信小程序只需要學(xué)習(xí)微信開(kāi)發(fā)文檔即可簡(jiǎn)單上手，開(kāi)發(fā)者擁有一臺(tái)筆記本就可完成全過(guò)程開(kāi)發(fā)。而微信開(kāi)發(fā)者工具對(duì)新手友好，小程序的語(yǔ)言是在HTML等語(yǔ)言的框架上演化而來(lái)的，如果開(kāi)發(fā)者學(xué)習(xí)過(guò)JS之類的語(yǔ)言，和小程序的語(yǔ)法是一脈相承的，有很多的共通性，學(xué)習(xí)微信官方的文檔就可以編寫小程序，而微信提供的大量小程序模板和可視化開(kāi)發(fā)，因此技術(shù)可行性是可以的。3.2需求分析3.2.1平臺(tái)用戶需求分析音樂(lè)是能夠抵達(dá)心靈深處的藝術(shù)，可以滌蕩心靈，陶冶情操，聽(tīng)音樂(lè)可以放松人的身心，每首歌都講述著一個(gè)個(gè)光陰的故事。在我們和音樂(lè)之間搭建起一座座音樂(lè)溝通的橋梁，聆聽(tīng)歌曲，完成個(gè)人與音樂(lè)的共振。而現(xiàn)在各大廠商的APP——音樂(lè)播放器又過(guò)于復(fù)雜瑣碎，所賦予它的更多是社交層面上的內(nèi)容，導(dǎo)致用戶的體驗(yàn)感下降。而微信小程序的特點(diǎn)很明顯，比如開(kāi)發(fā)成本節(jié)省了很多數(shù)據(jù)庫(kù)操作，傳播便捷。因此本平臺(tái)提供了聽(tīng)音樂(lè)、查音樂(lè)、播放MV，評(píng)論、點(diǎn)贊、發(fā)布動(dòng)態(tài)等功能。圖3-1用戶用例圖3.2.2平臺(tái)管理員需求分析平臺(tái)的管理員需要對(duì)這個(gè)平臺(tái)的內(nèi)容進(jìn)行管理，具體為平臺(tái)的輪播圖管理、歌單管理、評(píng)論管理等。其中輪播圖管理是對(duì)首頁(yè)的輪播圖進(jìn)行管理，歌單管理是對(duì)歌單的相關(guān)信息修改，評(píng)論管理是對(duì)用戶的動(dòng)態(tài)管理。圖3-2管理員用例圖4平臺(tái)設(shè)計(jì)4.1平臺(tái)功能模塊設(shè)計(jì)音樂(lè)社區(qū)小程序由五大模塊構(gòu)成，分別為發(fā)現(xiàn)界面、視頻界面、搜索界面、博客界面和我的界面。音樂(lè)社區(qū)小程序的功能需要做到用戶可以播放音樂(lè)、暫停音樂(lè)、查看歌單、查看并播放每日推薦的歌曲、搜索歌曲信息，當(dāng)用戶點(diǎn)擊歌單查看歌曲，或者是搜索歌曲時(shí)，點(diǎn)擊對(duì)應(yīng)的單曲名稱都會(huì)跳轉(zhuǎn)到歌曲播放的界面，并顯示正確的歌曲信息，比如歌手名稱、歌詞是否隨播放時(shí)間同步滾動(dòng)等。用戶對(duì)自己喜歡的歌曲可以點(diǎn)擊紅心，添加到我的喜歡的歌單里，并且可以查看歌曲的評(píng)論以及在博客界面發(fā)布動(dòng)態(tài)、評(píng)論動(dòng)態(tài)等功能。圖4-1功能結(jié)構(gòu)圖4.1.1首頁(yè)界面設(shè)計(jì)用戶進(jìn)入小程序，從上至下依次是搜索框、輪播圖，一排五個(gè)圖標(biāo)、歌單推薦和飆升榜單等排行榜，每個(gè)模塊的歌曲封面，歌單封面，歌單信息和歌手信息以及搜索框都是利用網(wǎng)易云音樂(lè)接口的數(shù)據(jù)顯示在頁(yè)面上，用戶可以點(diǎn)擊歌單或者榜單歌曲，選擇用戶喜歡的歌曲播放。圖4-2首頁(yè)界面流程圖4.1.2每日推薦界面設(shè)計(jì)用戶在首頁(yè)點(diǎn)擊每日推薦的圖標(biāo)跳轉(zhuǎn)到每日推薦頁(yè)面，頁(yè)面上部分是一張圖片和每天的日期，下半部分是推薦的歌曲列表，用戶點(diǎn)擊歌曲則跳轉(zhuǎn)到音樂(lè)播放的界面，歌曲列表展示了歌曲封面、歌曲名和歌手名，用戶可以選擇喜歡的歌曲播放。4.1.3搜索界面設(shè)計(jì)當(dāng)用戶需要搜索內(nèi)容時(shí)，輸入搜索關(guān)鍵詞將會(huì)出現(xiàn)對(duì)應(yīng)的歌曲、歌單、視頻信息，并且實(shí)現(xiàn)關(guān)鍵字的模糊匹配，使用定時(shí)器節(jié)流，提升用戶體驗(yàn)。用戶點(diǎn)擊搜索列表的結(jié)果可以跳轉(zhuǎn)到搜索詳情頁(yè)。用戶點(diǎn)擊歷史記錄也能實(shí)現(xiàn)跳轉(zhuǎn)，點(diǎn)擊刪除按鈕則清除記錄。而下部份是基于網(wǎng)易云音樂(lè)的數(shù)據(jù)呈現(xiàn)實(shí)時(shí)熱搜榜，展現(xiàn)了歌曲的熱度排名，做出的排行榜，點(diǎn)擊對(duì)應(yīng)的信息會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的搜索詳情頁(yè)面。圖4-3搜索界面流程圖4.1.4博客界面設(shè)計(jì)博客界面包含四個(gè)組件，由三個(gè)界面組成，左上角是發(fā)布動(dòng)態(tài)信息的圖標(biāo)，點(diǎn)擊該圖標(biāo)跳轉(zhuǎn)到發(fā)布動(dòng)態(tài)信息的頁(yè)面，點(diǎn)擊發(fā)布按鈕愛(ài)判斷內(nèi)容是否為空白，空白會(huì)彈出請(qǐng)輸入內(nèi)容警告框，旁邊是搜索框，可以搜索用戶發(fā)布的動(dòng)態(tài)信息，接下來(lái)是將動(dòng)態(tài)信息顯示在頁(yè)面上，動(dòng)態(tài)信息包含用戶的頭像、發(fā)布時(shí)間和發(fā)布內(nèi)容等數(shù)據(jù)，接下來(lái)是評(píng)論組件，用戶點(diǎn)擊評(píng)論會(huì)觸發(fā)消息模板，只有訂閱收到評(píng)論通知消息模板才允許評(píng)論，再判斷用戶授權(quán)的權(quán)限，若沒(méi)有則彈出授權(quán)彈窗，提醒用戶授權(quán)。圖4-4博客界面流程圖4.1.5視頻界面設(shè)計(jì)視頻界面由導(dǎo)航圖，搜索框，視頻小卡片組成，用戶點(diǎn)擊視頻頁(yè)面導(dǎo)航欄的標(biāo)簽，刷新對(duì)應(yīng)的視頻數(shù)據(jù)，可以下拉刷新，也可以觸底刷新觸發(fā)。當(dāng)用戶點(diǎn)擊視頻卡片時(shí)跳轉(zhuǎn)到該視頻的播放詳情頁(yè)，播放詳情頁(yè)用戶可以播放/暫停視頻，查看視頻信息和網(wǎng)友的評(píng)論。以上操作都是在用戶登陸的基礎(chǔ)上實(shí)現(xiàn)的，所以當(dāng)用戶點(diǎn)擊視頻圖標(biāo)會(huì)判斷用戶是否登陸，沒(méi)有則跳轉(zhuǎn)至登錄界面，進(jìn)行登陸操作。4.1.6我的界面設(shè)計(jì)用戶點(diǎn)擊我的界面可以進(jìn)入登陸頁(yè)面，點(diǎn)擊頭像圖標(biāo)，來(lái)到登錄頁(yè)面，輸入用戶的賬號(hào)網(wǎng)易云音樂(lè)賬號(hào)進(jìn)行登陸的操作，同時(shí)更新用戶空間的背景和頭像等信息，用戶可以點(diǎn)擊播放歷史或者歌單里的歌曲海報(bào)，之后跳轉(zhuǎn)到該歌曲的播放器頁(yè)面，在播放界面可以對(duì)音樂(lè)暫停、點(diǎn)贊、查看評(píng)論操作。4.1.7播放界面設(shè)計(jì)用戶通過(guò)點(diǎn)擊具體的歌曲名稱跳轉(zhuǎn)到該界面，獲取該歌曲的id，加載界面的歌曲封面、歌手信息，對(duì)應(yīng)歌詞，對(duì)播放歌曲進(jìn)行緩存。在歌曲播放時(shí)，歌曲海報(bào)同步進(jìn)行旋轉(zhuǎn)，點(diǎn)擊碟子可以切換道歌詞界面，同時(shí)滑動(dòng)碟子也能切換播放歌曲，進(jìn)度條和歌詞隨著歌曲的播放同步變化，左下角是當(dāng)前播放列表的數(shù)據(jù)，背景采用了當(dāng)前歌曲海報(bào)毛玻璃效果。4.1.8歌單廣場(chǎng)界面設(shè)計(jì)用戶點(diǎn)擊首頁(yè)的排行榜圖標(biāo)和排行榜的更多按鈕將跳轉(zhuǎn)至歌單廣場(chǎng)的界面，排行榜界面展示了網(wǎng)易云音樂(lè)的官方榜單和各類全球榜單，點(diǎn)擊榜單會(huì)跳轉(zhuǎn)到歌曲列表頁(yè)，展示榜單具體信息，比如歌單的簡(jiǎn)介、分類、創(chuàng)建者信息以及歌單下的歌曲，點(diǎn)擊對(duì)應(yīng)的歌曲可以播放，同時(shí)下拉觸底刷新歌曲列表數(shù)據(jù)。4.2平臺(tái)結(jié)構(gòu)設(shè)計(jì)音樂(lè)社區(qū)小程序可以在手機(jī)上運(yùn)行，主要分為用戶前端和管理員后端，前臺(tái)：首頁(yè)、每日推薦、歌單廣場(chǎng)、排行榜、歌單、播放視頻、博客、我的界面；后臺(tái)主要是對(duì)歌曲信息的管理和用戶評(píng)論的管理。圖4-5平臺(tái)結(jié)構(gòu)圖4.3數(shù)據(jù)庫(kù)設(shè)計(jì)小程序的云數(shù)據(jù)庫(kù)中主要存放六張表，分別是bolg、bolg-comment、playlist、swiper、videoGroupList、dailySongs這六張表。blog表用來(lái)保存用戶的動(dòng)態(tài)信息，bolg-comment表用來(lái)保存用戶的評(píng)論，playlist表用來(lái)保存歌單信息，swiper表用來(lái)保存輪播圖的信息，videoGroupList表用來(lái)保存視頻對(duì)應(yīng)分類的視頻標(biāo)簽信息，dailySongs表用來(lái)保存每日推薦歌曲的信息。4.3.1數(shù)據(jù)庫(kù)e-r圖設(shè)計(jì)將小程序云數(shù)據(jù)庫(kù)中的數(shù)據(jù)實(shí)體和數(shù)據(jù)實(shí)體聯(lián)系起來(lái)，規(guī)劃相關(guān)數(shù)據(jù)。在平臺(tái)中用戶可以查看歌單、聽(tīng)音樂(lè)、發(fā)布動(dòng)態(tài)并進(jìn)行評(píng)論。圖4-6歌單實(shí)體屬性圖圖4-7輪播圖實(shí)體屬性圖圖4-8視頻標(biāo)簽實(shí)體屬性圖圖4-9評(píng)論實(shí)體屬性圖圖4-10動(dòng)態(tài)信息實(shí)體屬性圖圖4-11每日推薦歌曲實(shí)體屬性圖圖4-12平臺(tái)E-R圖4.3.2數(shù)據(jù)表設(shè)計(jì)blog表的數(shù)據(jù)庫(kù)設(shè)計(jì)如圖4-1所示。表4-1數(shù)據(jù)庫(kù)blog表字段名稱字段意義字段類型是否主鍵是否為空_id編號(hào)string是否Content評(píng)論內(nèi)容string否否creatTime發(fā)布時(shí)間data否否Img評(píng)論圖片array否能nickName用戶昵稱string否否_openid用戶編號(hào)string否否avatarUrl頭像地址string否否blog-comment表的數(shù)據(jù)庫(kù)設(shè)計(jì)如圖4-2所示。表4-2數(shù)據(jù)庫(kù)blog-comment表字段名稱字段意義字段類型是否主鍵是否為空_id編號(hào)string是否_openid用戶編號(hào)string否否avatarUrl頭像地址string否否Content評(píng)論內(nèi)容string否否creatTime發(fā)布時(shí)間data否否Img評(píng)論圖片array否能nickName用戶昵稱string否否playlist表的數(shù)據(jù)庫(kù)設(shè)計(jì)如圖4-3所示。表4-3數(shù)據(jù)庫(kù)playlist表字段名稱字段意義字段類型是否主鍵是否為空_id編號(hào)string是否alg應(yīng)用層網(wǎng)關(guān)string否否canDislike是否收藏歌單boolean否否copywriter歌單介紹string否否creatTime發(fā)布時(shí)間data否否highQuality高音質(zhì)boolean否否id歌單idnumber否否name歌單名稱string否否picUrl歌單封面string否否playcount播放次數(shù)number否否trackCount音軌總數(shù)number否否trackNumberUpdateTime時(shí)間戳number否否type歌單類型number否否swiper表的數(shù)據(jù)庫(kù)設(shè)計(jì)如圖4-4所示。表4-4數(shù)據(jù)庫(kù)swiper表字段名稱字段意義字段類型是否主鍵是否為空_id編號(hào)string是否fileid文件編號(hào)String否否videoGroupList表的數(shù)據(jù)庫(kù)設(shè)計(jì)如圖4-5所示。表4-5數(shù)據(jù)庫(kù)videoGroupList表字段名稱字段意義字段類型是否主鍵是否為空_id編號(hào)string否否abExtInfo擴(kuò)展屬性null否是id視頻標(biāo)簽idnumber是否name視頻標(biāo)簽名稱string否是relatedVideoType相關(guān)視頻類型string否否selectTab選擇標(biāo)簽boolean否否url鏈接null否是dailySongs表的數(shù)據(jù)庫(kù)設(shè)計(jì)如圖4-6所示。表4-6數(shù)據(jù)庫(kù)dailySongs表字段名稱字段意義字段類型是否主鍵是否為空id歌曲idnumber是否_id編號(hào)string否否name歌曲名稱string否否ar_name歌手名稱string否否al_name專輯名稱string否否pic圖片number否否picUrl圖片鏈接string否否pic_str圖片idstring否否reason推薦理由string否否5音樂(lè)社區(qū)小程序功能實(shí)現(xiàn)音樂(lè)社區(qū)小程序的模塊主要包括首頁(yè)發(fā)現(xiàn)頁(yè)面、每日推薦頁(yè)面、歌單頁(yè)面、排行榜頁(yè)面、電臺(tái)頁(yè)面、視頻頁(yè)面、博客頁(yè)面、我的頁(yè)面和登陸頁(yè)面等。5.1發(fā)現(xiàn)界面實(shí)現(xiàn)用戶通過(guò)微信進(jìn)入音樂(lè)社區(qū)小程序，發(fā)現(xiàn)界面的UI設(shè)計(jì)參考的網(wǎng)易云音樂(lè)。從上到下分為五個(gè)區(qū)域。搜索框可以搜索歌曲信息，輪播圖通過(guò)調(diào)用云開(kāi)發(fā)的云數(shù)據(jù)庫(kù)的swiper表將數(shù)據(jù)渲染在頁(yè)面。推薦歌單區(qū)域和排行榜通過(guò)向服務(wù)器發(fā)送request請(qǐng)求，獲取歌單數(shù)據(jù)和排行榜數(shù)據(jù)，根據(jù)排行榜的id，查詢排行榜詳情，然后循環(huán)滑動(dòng)，將獲取的數(shù)據(jù)綁定在頁(yè)面上。底端的播放器則是通過(guò)組件<bottomControl></bottomControl>實(shí)現(xiàn)，通過(guò)isplay()獲取當(dāng)前播放歌曲的播放狀態(tài)以及歌曲信息渲染在頁(yè)面上。圖5-1發(fā)現(xiàn)頁(yè)實(shí)現(xiàn)流程圖發(fā)現(xiàn)界面如圖5-2所示：圖5-2首頁(yè)界面圖5.2搜索界面實(shí)現(xiàn)用戶通過(guò)點(diǎn)擊發(fā)現(xiàn)頁(yè)的搜索框跳轉(zhuǎn)到搜索頁(yè)面，頁(yè)面執(zhí)行g(shù)etSearchDefaul()獲取默認(rèn)搜索內(nèi)容，如果用戶點(diǎn)擊回車鍵搜索內(nèi)容為空則搜索默認(rèn)內(nèi)容，當(dāng)用戶在輸入框輸入關(guān)鍵詞時(shí)，使用定時(shí)器節(jié)流，按回車鍵或者收縮結(jié)果跳轉(zhuǎn)至搜索詳情頁(yè)，并將輸入的關(guān)鍵詞通過(guò)changeSearchHistory()添加到歷史記錄，用戶輸入內(nèi)容的同時(shí)顯示

叉叉圖標(biāo)，點(diǎn)擊該圖標(biāo)執(zhí)行cleanInput()，清空搜索框

內(nèi)容，點(diǎn)擊歷史記錄的叉叉圖標(biāo)，執(zhí)行deleteHistory()方法，則清空歷史記錄。下半部分是熱搜榜，通過(guò)網(wǎng)易云音樂(lè)接口的數(shù)據(jù)將數(shù)據(jù)渲染到頁(yè)面上。搜索界面如圖5-3所示：圖5-3搜素界面界面圖5.3視頻界面實(shí)現(xiàn)當(dāng)點(diǎn)擊視頻頁(yè)面時(shí)，判斷用戶是否登錄，若沒(méi)有則跳轉(zhuǎn)至登錄界面。當(dāng)用戶點(diǎn)擊導(dǎo)航標(biāo)簽中對(duì)用視頻類型時(shí)，獲取當(dāng)前視頻標(biāo)簽的id，將獲取的視頻標(biāo)簽id傳遞給request，以獲取視頻標(biāo)簽所對(duì)應(yīng)的視頻，刷新視頻列表。同時(shí)自定義下拉刷新的回調(diào)和拉觸底加載的回調(diào)事件，將刷新獲取的數(shù)據(jù)直接追加到當(dāng)前視頻列表。視頻界面如圖5-4所示：圖5-4視頻界面界面圖5.4播放界面實(shí)現(xiàn)當(dāng)用戶點(diǎn)擊歌曲播放時(shí)，獲取當(dāng)前播放歌曲的id、索引、當(dāng)前播放的音樂(lè)列表數(shù)據(jù)以及碟子的狀態(tài)，isNeedlePlay判斷指針是否播放狀態(tài)，點(diǎn)擊暫停時(shí)，指針抬起，值為false；點(diǎn)擊播放時(shí)，值為true。接著獲取當(dāng)前歌曲所屬的音樂(lè)列表，從全局拿到當(dāng)前的播放歌單以及播放歌曲的索引，如果是搜索列表的歌曲，就不用請(qǐng)求列表，直接把歌曲插入到當(dāng)前的歌單中，接著查詢音樂(lè)id，再將查詢到的臨時(shí)musicInfo插入到playingMusicList中。通過(guò)isPLay判斷播放狀態(tài)，創(chuàng)建控制音樂(lè)播放的實(shí)例對(duì)象，同時(shí)監(jiān)聽(tīng)音樂(lè)進(jìn)度，

根據(jù)實(shí)時(shí)播放時(shí)間實(shí)現(xiàn)歌詞滾動(dòng)。播放界面如圖5-5所示：圖5-5播放界面界面圖5.5歌單廣場(chǎng)界面實(shí)現(xiàn)當(dāng)用戶點(diǎn)擊首頁(yè)里對(duì)應(yīng)歌單封面圖，獲取當(dāng)前歌單的id，對(duì)數(shù)據(jù)庫(kù)發(fā)出請(qǐng)求獲取對(duì)應(yīng)id，將獲取到的數(shù)據(jù)顯示到歌單廣場(chǎng)頁(yè)面。歌單廣場(chǎng)界面如圖5-6所示5-6歌單廣場(chǎng)界面界面圖5.6博客界面實(shí)現(xiàn)當(dāng)用戶點(diǎn)擊發(fā)布動(dòng)態(tài)圖標(biāo)時(shí)觸發(fā)wx.getsrtting()方法檢測(cè)使用者是否允許授權(quán)，如果使用者沒(méi)有授權(quán)，頁(yè)面會(huì)顯示授權(quán)彈窗，用來(lái)提醒用戶授權(quán)。博客界面如圖5-7所示5-7歌單廣場(chǎng)界面界面圖5.7我的界面實(shí)現(xiàn)用戶進(jìn)入我的界面，默認(rèn)顯示不登陸，用戶可以點(diǎn)擊頭像，跳轉(zhuǎn)到登陸頁(yè)面進(jìn)行登陸，來(lái)獲取頭像、昵稱和賬號(hào)信息等，當(dāng)用戶輸入賬號(hào)和密碼時(shí)，收集表單項(xiàng)數(shù)據(jù)，在前端使用正則表達(dá)式初步判斷用戶的賬號(hào)是否符合規(guī)則，前端驗(yàn)證不通過(guò)提示用戶，不需要發(fā)送請(qǐng)求給后端，前端驗(yàn)證通過(guò)之后，發(fā)送請(qǐng)求（攜帶賬號(hào)，密碼）給服務(wù)器端。在服務(wù)器端判斷是否是正確的密碼，密碼正確返回前端數(shù)據(jù)，提示用戶登錄成功。返回?cái)?shù)據(jù)，渲染頁(yè)面。我的界面如圖5-8所示：圖5-8我的界面圖5.8排行榜界面實(shí)現(xiàn)在首頁(yè)發(fā)現(xiàn)界面通過(guò)點(diǎn)擊排行榜按鈕，進(jìn)入排行榜界面，用戶當(dāng)點(diǎn)擊對(duì)應(yīng)榜單時(shí)，獲取其id值，將獲取的id賦值給下個(gè)頁(yè)面。將得到的數(shù)據(jù)的渲染即可得到歌單信息。列表界面如圖5-9所示圖5-9歌單廣場(chǎng)界面界面圖5.9管理員后臺(tái)管理實(shí)現(xiàn)音樂(lè)社區(qū)平臺(tái)的后臺(tái)管理是使用Vue-admin-template管理后臺(tái)。獨(dú)立于云控制臺(tái)進(jìn)行內(nèi)容的管理。5.9.1音樂(lè)社區(qū)平臺(tái)管理登錄后臺(tái)管理系統(tǒng)實(shí)現(xiàn)前后端分離，利用訪問(wèn)微信小程序云開(kāi)發(fā)資源實(shí)現(xiàn)對(duì)云數(shù)據(jù)庫(kù)的調(diào)用，實(shí)現(xiàn)項(xiàng)目中文件的管理。圖5-10后臺(tái)管理系統(tǒng)登錄界面5.9.2管理后臺(tái)數(shù)據(jù)錄入實(shí)現(xiàn)在音樂(lè)社區(qū)小程序的管理后臺(tái)，管理員點(diǎn)擊上傳的按鈕，選擇圖片之后，使用HTTPAPI調(diào)用云存儲(chǔ)的數(shù)據(jù)，上傳文件之后將圖片的信息保存到小程序的云數(shù)據(jù)庫(kù)。圖5-11添加輪播圖界面5.8.3內(nèi)容管理平臺(tái)數(shù)據(jù)管理在完成數(shù)據(jù)的錄入后就能夠?qū)?shù)據(jù)進(jìn)行管理，我們可以在管理后臺(tái)對(duì)平臺(tái)里的數(shù)據(jù)進(jìn)行管理。圖5-12管理后臺(tái)數(shù)據(jù)管理界面6系統(tǒng)測(cè)試6.1測(cè)試目的軟件測(cè)試是開(kāi)發(fā)過(guò)程中舉足輕重的一環(huán)，連通軟件開(kāi)發(fā)全過(guò)程。測(cè)試是為了給用戶帶來(lái)更加流暢操作的產(chǎn)品。6.2測(cè)試內(nèi)容模擬用戶進(jìn)入小程序，對(duì)各個(gè)功能進(jìn)行測(cè)試。點(diǎn)擊我的頁(yè)面的頭像是否能跳轉(zhuǎn)到登錄頁(yè)面，再到小程序首頁(yè)發(fā)現(xiàn)界面進(jìn)行點(diǎn)擊測(cè)試，點(diǎn)擊圖標(biāo)和歌單能否正常跳轉(zhuǎn)，使用搜索功能時(shí)，搜索到的結(jié)果是否與搜索內(nèi)容匹配。點(diǎn)擊對(duì)應(yīng)歌曲時(shí)是否跳轉(zhuǎn)到對(duì)應(yīng)播放頁(yè)，詳情界面內(nèi)容是否正常，點(diǎn)擊評(píng)論功能是否能正常發(fā)表評(píng)論，點(diǎn)擊播放暫停功能對(duì)應(yīng)狀態(tài)是否發(fā)生變化。6.3測(cè)試用例測(cè)試每個(gè)頁(yè)面的功能是否達(dá)到預(yù)期效果，測(cè)試結(jié)果如下所示：表6-1系統(tǒng)測(cè)試結(jié)果表序號(hào)測(cè)試項(xiàng)目操作預(yù)期結(jié)果結(jié)果1賬號(hào)登陸點(diǎn)擊我的頭像獲取用戶信息以及用戶聽(tīng)歌數(shù)據(jù)符合預(yù)期效果2視頻播放點(diǎn)擊視頻頁(yè)隨機(jī)視頻視頻正常播放數(shù)據(jù)正確對(duì)應(yīng)符合預(yù)期效果3對(duì)歌曲進(jìn)行搜索點(diǎn)擊搜索框進(jìn)行歌曲搜索出現(xiàn)對(duì)應(yīng)的單曲視頻歌單信息符合預(yù)期效果4歷史記錄查看點(diǎn)擊或者刪除任意歷史記錄可以刪除數(shù)據(jù)或者正確跳轉(zhuǎn)符合預(yù)期效果5發(fā)布動(dòng)態(tài)點(diǎn)擊發(fā)布動(dòng)態(tài)能正常發(fā)布動(dòng)態(tài)并顯示在頁(yè)面符合預(yù)期效果6評(píng)論動(dòng)態(tài)評(píng)論跳轉(zhuǎn)至評(píng)論發(fā)布并提交評(píng)論發(fā)布評(píng)論并顯示符合預(yù)期效果7播放歌曲點(diǎn)擊歌單歌曲正常播放符合預(yù)期效果8進(jìn)度條、歌詞拖動(dòng)進(jìn)度條正確跳轉(zhuǎn)到單曲的時(shí)間和歌詞符合預(yù)期效果9歌單詳情查看點(diǎn)擊歌單分類可以跳轉(zhuǎn)至該分類下的歌單符合預(yù)期效果6.4測(cè)試結(jié)果測(cè)試完畢后，音樂(lè)社區(qū)小程序的功能達(dá)到預(yù)期效果，雖然一些功能不夠完善，但基本上滿足了一個(gè)平臺(tái)的基本需求。結(jié)論音樂(lè)社區(qū)小程序主要由WXML、WXSS、VUE、JS等編程語(yǔ)言編寫而成的，基于微信開(kāi)發(fā)者工具開(kāi)發(fā)的音樂(lè)類