基于微信小程序音樂社區(qū)的設(shè)計(jì)與實(shí)現(xiàn)

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

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

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

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

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