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

廣東東軟學(xué)院本科畢業(yè)設(shè)計(jì)（論文）基于微信小程序的音樂播放的設(shè)計(jì)與實(shí)現(xiàn)Designandimplementationofmusicplayingbasedonwechatapplet摘要本次設(shè)計(jì)實(shí)現(xiàn)的音樂播放器小程序，讓用戶可以在登錄微信之后，在微信首頁(yè)通過(guò)簡(jiǎn)單的下拉操作即可直接打開小程序即可享受到音樂視聽盛宴。依托于微信本身對(duì)數(shù)據(jù)可以進(jìn)行緩存，讓用戶在第一次聽歌之后，無(wú)需多次耗費(fèi)流量資源，即可繼續(xù)播放。本文基于微信小程序開發(fā)，使用微信小程序獨(dú)特構(gòu)建，來(lái)實(shí)現(xiàn)音樂播放程序的設(shè)計(jì)和功能開發(fā)工作。在技術(shù)方面主要通過(guò)JS來(lái)進(jìn)行業(yè)務(wù)邏輯的實(shí)現(xiàn)，而表現(xiàn)層則WXML和WXSS來(lái)共同實(shí)現(xiàn)。程序主要包括如下功能：首頁(yè)歌曲歌單展示、歌曲搜索功能、歌曲列表一覽功能、歌曲播放、單曲循環(huán)設(shè)置、隨機(jī)播放設(shè)置、下拉刷新?lián)Q曲、用戶登錄、歌曲切換功能、暫停/重播功能、歌曲時(shí)長(zhǎng)進(jìn)度條展示功能，能夠基本滿足用戶對(duì)聽歌的使用需求。關(guān)鍵詞：互聯(lián)網(wǎng)應(yīng)用微信小程序音樂播放

ABSTRACTThemusicplayerappletdesignedandimplementedinthisdesignallowsuserstologintowechat,andthendirectlyopentheappletthroughasimplepull-downoperationonthewechathomepagetoenjoythemusicaudio-visualfeast.Relyingonwechatitself,datacanbecached,sothatuserscancontinueplayingafterthefirsttimelisteningtosongswithoutconsumingtrafficresourcesformanytimes.Basedonthedevelopmentofwechatapplet,thispaperusestheuniqueconstructionofwechatapplettorealizethedesignandfunctiondevelopmentofmusicplayingprogram.Intermsoftechnology,JSismainlyusedtoimplementbusinesslogic,whilewxmlandwxssareusedtoimplementthepresentationlayer.Theprogrammainlyincludesthefollowingfunctions:thefirstpagesongsingledisplay,songsearchfunction,songlistlistfunction,songplay,singlecyclesetting,randomplaysetting,pull-downrefreshandmusicchange,userlogin,songswitchingfunction,pause/replayfunction,songdurationprogressbardisplayfunction,whichcanbasicallymeettheuser'sdemandforlisteningtosongs.Keywords：Internetapplications,Wechatapplet,Musicplaying

目錄Designandimplementationofmusicplayingbasedonwechatapplet摘要 1ABSTRACT 21. 緒論 11.1 選題背景 11.2 課題研究目的及意義 11.3 論文主要研究?jī)?nèi)容 21.4 論文的結(jié)構(gòu) 22. 系統(tǒng)開發(fā)技術(shù)方案研究 32.1 平臺(tái)與框架 32.1.1 微信開發(fā)者工具 32.1.2 Taro框架 32.2 開發(fā)技術(shù) 52.2.1 WXML技術(shù) 52.2.2 WXSS與CSS技術(shù) 52.2.3 Ajax技術(shù) 52.2.4 JavaScript 52.2.5 數(shù)據(jù)庫(kù)概述 52.2.6 Node.js概述 63. 系統(tǒng)分析 73.1 系統(tǒng)可行性分析 73.1.1 技術(shù)可行性 73.1.2 經(jīng)濟(jì)可行性 73.1.3 操作可行性 73.2 系統(tǒng)開發(fā)環(huán)境 73.2.1 軟件環(huán)境 73.2.2 硬件環(huán)境 73.3 系統(tǒng)需求分析 83.3.1 功能需求分析 83.3.2 性能需求分析 94. 系統(tǒng)模塊詳細(xì)設(shè)計(jì) 104.1 系統(tǒng)總體功能框架設(shè)計(jì) 104.2 系統(tǒng)功能模塊設(shè)計(jì) 104.2.1 用戶登錄模塊設(shè)計(jì) 104.2.2 系統(tǒng)首頁(yè)模塊設(shè)計(jì) 114.2.3 歌曲搜索功能設(shè)計(jì) 114.2.4 音樂播放模塊設(shè)計(jì) 124.2.5 播放模式切換模塊設(shè)計(jì) 124.3 本章小結(jié) 135. 系統(tǒng)實(shí)現(xiàn) 145.1 用戶登錄模塊實(shí)現(xiàn) 145.2 首頁(yè)模塊實(shí)現(xiàn)效果 165.3 歌曲列表展示實(shí)現(xiàn)效果 165.4 音樂播放模塊實(shí)現(xiàn)效果 175.5 播放模式模塊切換實(shí)現(xiàn)效果 186. 數(shù)據(jù)庫(kù)設(shè)計(jì) 207. 系統(tǒng)測(cè)試 217.1 測(cè)試與糾錯(cuò)流程 217.2 測(cè)試環(huán)境準(zhǔn)備 217.3 測(cè)試方法介紹 227.4 系統(tǒng)功能測(cè)試 227.5 測(cè)試分析 24總結(jié)與展望 25參考文獻(xiàn) 26致謝 27

緒論1.1 選題背景伴隨著智能手機(jī)的普及以及國(guó)家對(duì)運(yùn)營(yíng)商提出的“提速降費(fèi)”政策的實(shí)施，移動(dòng)互聯(lián)應(yīng)用在國(guó)內(nèi)市場(chǎng)百花齊放，各行各業(yè)都在移動(dòng)端設(shè)備上搭載各自的APP。移動(dòng)端設(shè)備的操作習(xí)慣和個(gè)人電腦使用完全不同，對(duì)于各應(yīng)用廠商來(lái)說(shuō)，他們需要在較小的屏幕上盡可能友好的展示用戶需要的內(nèi)容，才能達(dá)到培養(yǎng)用戶習(xí)慣、繼而達(dá)到持續(xù)擁有這個(gè)用戶流量的可能[7]。同樣隨著移動(dòng)端的應(yīng)用越來(lái)越廣泛的是：一個(gè)領(lǐng)域下同類型的公司也越來(lái)越多，本論文所實(shí)現(xiàn)的是一個(gè)音樂播放小程序，其中一個(gè)原因就是在日常聽歌過(guò)程中，因?yàn)楦枨鏅?quán)、曲庫(kù)內(nèi)容、使用習(xí)慣的不同，需要下載多個(gè)音樂APP，加大占用了手機(jī)的內(nèi)存資源，同時(shí)帶來(lái)了繁瑣的操作方式。微信通過(guò)這么多年的努力，打造了一個(gè)完整的生態(tài)圈，使得用戶粘度不斷提高，引得各大互聯(lián)網(wǎng)平臺(tái)紛紛在微信上入駐為小程序商家，以滿足自己產(chǎn)品多元化，增加產(chǎn)品可擴(kuò)展性，提高用戶交融性[3]，但是用戶在操作上，只需要打開微信這一個(gè)APP即可，無(wú)需更加復(fù)雜的操作?？偟膩?lái)說(shuō)，微信小程序是擁抱了用戶希望的變化：減少APP的下載、注冊(cè)，直接打開微信，一站即達(dá)。1.2 課題研究目的及意義微信作為一款高頻的社交軟件，對(duì)于入駐在微信上的小程序商家來(lái)說(shuō)，很容易產(chǎn)生分享、易傳播，達(dá)到用戶數(shù)量裂變的目的。而對(duì)于用戶來(lái)說(shuō)，微信小程序帶來(lái)了依托微信本身的單點(diǎn)登錄、免注冊(cè)、手機(jī)內(nèi)存瘦身、易在一個(gè)朋友圈中進(jìn)行傳播等優(yōu)勢(shì)。本次設(shè)計(jì)實(shí)現(xiàn)的音樂播放系統(tǒng)，目的是基于微信平臺(tái)，能夠讓用戶在小程序上非?？焖俚膶?shí)現(xiàn)歌曲收聽等功能。同時(shí)也做到了對(duì)音樂播放軟件功能的集成和成熟應(yīng)用。通過(guò)微信本身的小程序分享接口，能夠在朋友圈中進(jìn)行快速推廣，方便在日常生活中進(jìn)行使用。對(duì)用戶來(lái)說(shuō)，一個(gè)輕便的音樂播放系統(tǒng)能夠帶來(lái)操作上的簡(jiǎn)化，功能清晰，讓用戶一目了然。對(duì)筆者來(lái)說(shuō)，可以研究用戶的使用習(xí)慣：借助微信后臺(tái)的流量信息，可以進(jìn)一步統(tǒng)計(jì)用戶的歌曲播放量、小程序使用量，以進(jìn)一步研究用戶的操作習(xí)慣，更好地提升下一版本的系統(tǒng)功能。1.3 論文主要研究?jī)?nèi)容本次開發(fā)的音樂播放微信小程序，主要基于微信開發(fā)者工具上，使用Taro框架的開發(fā)流程進(jìn)行，目的是為了后續(xù)可以適應(yīng)多端產(chǎn)品的小程序使用，主要進(jìn)行一下幾塊內(nèi)容的研究：Taro組件及API功能的學(xué)習(xí)研究。微信小程序開發(fā)文檔的學(xué)習(xí)研究。Taro框架React組件的學(xué)習(xí)研究。微信小程序設(shè)計(jì)指南的學(xué)習(xí)研究。JSON、Node.js、HTML、CSS的學(xué)習(xí)研究。系統(tǒng)功能需求模塊分析、劃分。系統(tǒng)的功能模塊的劃分是根據(jù)系統(tǒng)的功能需求來(lái)設(shè)定的，只有對(duì)需求分析的透徹，才會(huì)盡量避免返工的情況，因此，在軟件開發(fā)之前，需求分析是第一要素。而為了減少數(shù)據(jù)的冗余，透過(guò)功能分析，采用結(jié)構(gòu)化的數(shù)據(jù)規(guī)范方法，用以減少數(shù)據(jù)的操作產(chǎn)生的異常。1.4 論文的結(jié)構(gòu)本論文一共有七章，其結(jié)構(gòu)如下：第一章：緒論。目的是對(duì)本次設(shè)計(jì)實(shí)現(xiàn)的系統(tǒng)的背景、意義以及研究的內(nèi)容做出說(shuō)明。第二章：系統(tǒng)開發(fā)技術(shù)方案研究，主要對(duì)本系統(tǒng)所使用的關(guān)鍵技術(shù)和框架以及其原理和使用的原因進(jìn)行介紹。第三章：系統(tǒng)分析，包括對(duì)系統(tǒng)的定義，可行性的分析、需求的分析，以及可行性方面的分析；第四章：系統(tǒng)模塊詳細(xì)設(shè)計(jì)，系統(tǒng)的設(shè)計(jì)指的是本系統(tǒng)總體功能模塊的設(shè)計(jì)，并且對(duì)單獨(dú)的模塊實(shí)現(xiàn)的功能也有相對(duì)應(yīng)的設(shè)計(jì)說(shuō)明。第五章：系統(tǒng)實(shí)現(xiàn)，包括系統(tǒng)的實(shí)現(xiàn)原理和各個(gè)功能模塊的具體實(shí)現(xiàn)。第六章：數(shù)據(jù)庫(kù)設(shè)計(jì)第七章：系統(tǒng)測(cè)試，指的是系統(tǒng)的測(cè)試方法、測(cè)試結(jié)果、測(cè)試結(jié)論的分析。結(jié)論與展望。系統(tǒng)開發(fā)技術(shù)方案研究本章主要對(duì)本次開發(fā)的音樂播放系統(tǒng)所用到的相關(guān)軟件技術(shù)以及開發(fā)平臺(tái)進(jìn)行了說(shuō)明：采用的開發(fā)模式、系統(tǒng)開發(fā)所需要的IDE編碼工具、開發(fā)語(yǔ)言、相應(yīng)開發(fā)技術(shù)和系統(tǒng)結(jié)構(gòu)進(jìn)行了相應(yīng)的介紹。2.1 平臺(tái)與框架微信開發(fā)者工具微信開小程序開發(fā)團(tuán)隊(duì)專門設(shè)計(jì)推出完全匹配微信內(nèi)容的開發(fā)工具-微信開發(fā)者工具，隨著近兩年對(duì)該工具的快速迭代和不斷更新，目前已經(jīng)處于比較穩(wěn)定的狀態(tài)，當(dāng)然前期的開發(fā)者在開發(fā)的時(shí)候仍然要隨著微信小程序的更新而對(duì)自己的應(yīng)用進(jìn)行更新。因此在微信開發(fā)者論壇上吐槽的文章是非常多的，但是正是這些吐槽的內(nèi)容才是微信更新的一個(gè)龐大的知識(shí)體量庫(kù)[1][2]。如圖2.1所示：圖2.1微信開發(fā)者工具個(gè)人中心：通過(guò)點(diǎn)擊頭像進(jìn)行個(gè)人中心面板的顯示；展示內(nèi)容：小程序版本、版本更新的消息推送；提供切換小程序賬號(hào)的入口在個(gè)人中心（頭像）后邊有三個(gè)按鈕：模擬器、編輯器和調(diào)試器：通過(guò)點(diǎn)擊進(jìn)行這三塊內(nèi)容的顯示或隱藏相應(yīng)的模塊編譯模式：普通編譯和自定義編譯條件預(yù)覽：在真機(jī)預(yù)覽遠(yuǎn)程調(diào)試：提供遠(yuǎn)程調(diào)試真機(jī)的功能，主要通過(guò)共同局域網(wǎng)環(huán)境下的網(wǎng)絡(luò)連接對(duì)小程序進(jìn)行調(diào)試。切后臺(tái)：切后臺(tái)按鈕會(huì)幫助我們快速的切到不同的場(chǎng)景值，通過(guò)這個(gè)場(chǎng)景值可以幫助我們?nèi)€(gè)性化一些我們的功能需求清緩存：清除開發(fā)者工具以及調(diào)試設(shè)備中的數(shù)據(jù)緩存、文件緩存、授權(quán)緩存、網(wǎng)絡(luò)緩存和我們的登錄狀態(tài)。Taro框架Taro框架是進(jìn)行微信小程序開發(fā)過(guò)程的一大利器。通過(guò)taro框架，我們可以使得技術(shù)棧進(jìn)行統(tǒng)一，以實(shí)現(xiàn)在節(jié)約資源的同時(shí)，極大提高我們的開發(fā)效率[12]。通過(guò)taro，我們可以完成一次編碼多端適配的效果。Taro編碼和編譯過(guò)程，以及目錄結(jié)果分別見圖2.2，圖2.3：圖2.2Taro流程圖圖2.3Taro項(xiàng)目目錄Taro的特點(diǎn)是：遵循react的語(yǔ)法規(guī)范，可以使用JSX語(yǔ)法規(guī)范開發(fā)小程序的應(yīng)用；支持組件化開發(fā)（解耦）；支持TypeScript語(yǔ)法開發(fā)；開發(fā)技術(shù)2.2.1 WXML技術(shù)W：代表微信，XML本身就是標(biāo)記性語(yǔ)言，因?yàn)槲覀兛梢杂蟹浅Ｖ庇^的理解：WXML是APP應(yīng)用程序開發(fā)過(guò)程中的界面XML描述文件，它是為構(gòu)建適合的程序界面而出現(xiàn)的[4][5]。WXSS與CSS技術(shù)CSS指層疊樣式表(Cascading

Style

Sheets)，定義了如何顯示HTML元素，而這些元素通常存儲(chǔ)在樣式表中，這樣的外部樣式表可以極大的提高工作效率，多個(gè)樣式定義可層疊為一[4][8]。CSS可以稱得上WEB設(shè)計(jì)領(lǐng)域的一個(gè)突破，如需進(jìn)行全局的更新，只需簡(jiǎn)單地改變樣式，然后網(wǎng)站中的所有元素均會(huì)自動(dòng)地更新。Ajax技術(shù)AJAX=異步JavaScript+XML，

ajax技術(shù)用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)。最顯著的就是“局部刷新”功能，使得程序設(shè)計(jì)者在不加在整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行刷新，這種技術(shù)極大的減少了資源的占用，并且一定程序上提升了網(wǎng)站的加載速度，使得用戶體驗(yàn)度更加友好。有很多使用AJAX的應(yīng)用程序案例：新浪微博、Google地圖、開心網(wǎng)等等[3][4]。JavaScript通過(guò)百度百科上的查詢，我們可以知道：JavaScript（以下簡(jiǎn)稱JS）一種直譯式的腳本語(yǔ)言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語(yǔ)言，內(nèi)置支持類型。常用于網(wǎng)頁(yè)客戶端編程，使網(wǎng)頁(yè)在客戶端瀏覽器中，實(shí)現(xiàn)更多地動(dòng)態(tài)功能，表現(xiàn)出更加豐富的視覺效果。JS由以下三個(gè)部分組成：ECMAScript：描述JS的語(yǔ)法和基本對(duì)象；文檔對(duì)象模型（DocumentObjectModel，簡(jiǎn)稱DOM））：描述處理網(wǎng)頁(yè)內(nèi)容的方法和接口；瀏覽器對(duì)象模型（BrowserObjectModel，簡(jiǎn)稱BOM））：描述與瀏覽器進(jìn)行交互的方法和接口。數(shù)據(jù)庫(kù)概述數(shù)據(jù)庫(kù)采用的是微信開發(fā)工具中的JSON數(shù)據(jù)庫(kù)[3][6]：它既可以在小程序前端操作，也能夠在云函數(shù)中進(jìn)行讀寫。正常情況下，初始化數(shù)據(jù)庫(kù)的代碼如下所示：//初始化數(shù)據(jù)庫(kù)constdb=wx.cloud.database();const_=mand;db.collection('userInformation').where({userName:_.eq(userName)}).get({success:function(res){if(res.data.length===1){that.setData({repetition:true})注意，在進(jìn)行數(shù)據(jù)庫(kù)連接的時(shí)候，要注意命名是正確的，不能與微信中現(xiàn)存的數(shù)據(jù)庫(kù)的連接名稱是相同的。Node.js概述Node.js有三個(gè)特征：服務(wù)器端JavaScript處理：server-sideJavaScriptexecution非阻斷/異步I/O：non-blockingorasynchronousI/O事件驅(qū)動(dòng)：Event-driven如上圖所示，傳統(tǒng)的服務(wù)器中，類似Apache、NGINX等web類型的服務(wù)器，客戶端發(fā)送的每一個(gè)請(qǐng)求，都會(huì)在服務(wù)端創(chuàng)建一個(gè)進(jìn)程來(lái)處理這個(gè)請(qǐng)求，但如果我們需要在一個(gè)頁(yè)面一直保持連接，比如持續(xù)實(shí)施接收朋友的消息或者系統(tǒng)推送內(nèi)容，就需要在客戶端和服務(wù)端保持一個(gè)長(zhǎng)時(shí)間的有效連接，這也就是長(zhǎng)輪詢。因此，node.js的非阻塞和事件驅(qū)動(dòng)就派上了用場(chǎng)。

系統(tǒng)分析系統(tǒng)可行性分析3.1.1 技術(shù)可行性對(duì)系統(tǒng)可行性進(jìn)行研究的目的在于確定是否可以在較短的時(shí)間內(nèi)使用最小的代價(jià)來(lái)把系統(tǒng)功能實(shí)現(xiàn)?；谖⑿判〕绦虻囊魳凡シ畔到y(tǒng)的用戶都是對(duì)這塊內(nèi)容有需要的人，在一定范圍內(nèi)關(guān)于數(shù)據(jù)關(guān)聯(lián)系的涉及是比較強(qiáng)的。而且應(yīng)用都是基于目前非常成熟的微信開發(fā)工具進(jìn)行開發(fā)的，所以技術(shù)方面是沒有問(wèn)題的。3.1.2 經(jīng)濟(jì)可行性經(jīng)濟(jì)可行性研究的目的是分析一個(gè)新開發(fā)的系統(tǒng)的費(fèi)用，本次基于微信小程序的音樂播放系統(tǒng)都是有基于成熟的技術(shù)來(lái)實(shí)現(xiàn)，完全是本人在課余時(shí)間看來(lái)完成的，并未占用更多的資源，所以在經(jīng)濟(jì)方面也是完全可行的。3.1.3 操作可行性操作可行性主要是看基于需求設(shè)計(jì)到開發(fā)出來(lái)的產(chǎn)品是否有人使用，用戶的體驗(yàn)度是否良好？本平臺(tái)的界面平滑度高，易于上手，尤其是用戶基本都使用過(guò)微信，而使用本系統(tǒng)的人，不需要進(jìn)行復(fù)雜的操作，只需要簡(jiǎn)單的對(duì)歌曲列表中的內(nèi)容進(jìn)行一次點(diǎn)觸操作，即可實(shí)現(xiàn)歌曲播放功能。在UI設(shè)計(jì)上，通過(guò)對(duì)各大應(yīng)用的調(diào)研，基本的功能按鈕簡(jiǎn)單易懂，因此對(duì)用戶的使用也沒有問(wèn)題，所以在操作方面也是可行的。系統(tǒng)開發(fā)環(huán)境軟件環(huán)境本次開發(fā)的基于微信小程序的音樂播放系統(tǒng)的開發(fā)所需的軟件環(huán)境如下：開發(fā)平臺(tái)：微信開發(fā)者工具[1]開發(fā)語(yǔ)言：WXML、WXSS、AJAX、JS、JSON數(shù)據(jù)庫(kù)、Trao框架其余內(nèi)容：Windows10操作系統(tǒng)硬件環(huán)境本次開發(fā)的基于微信小程序的音樂播放系統(tǒng)的開發(fā)所需的硬件環(huán)境如下：硬件環(huán)境：①筆記本450*2MHZ/40G/1024MB/40G/。②手機(jī)：iPhone11、小米6。系統(tǒng)需求分析功能需求分析本章節(jié)通過(guò)用戶的不同進(jìn)行功能需求的區(qū)分設(shè)計(jì)，具體內(nèi)容如下：角色和角色介紹：表3.1角色介紹表角色（參與者）角色描述管理員(歌曲資源維護(hù))發(fā)布、刪除、修改、查詢發(fā)布出去的歌曲信息。普通用戶登錄后可以正常使用本小程序內(nèi)所有的功能：音樂播放、音樂切換、音樂列表查詢等角色前后端的用例關(guān)系圖3.1角色前后端用例關(guān)系圖表3.2描述了用戶進(jìn)行歌曲播放的用例活動(dòng)。表3.2歌曲播放用例名稱：?jiǎn)栴}發(fā)布參與者：所有用戶描述：用戶使用小程序，在點(diǎn)擊具體的歌曲名稱前置條件：用戶成功登錄微信，打開音樂播放小程序用例功能：用戶在線聽歌功能事件流：用戶已正常登錄微信，且正常打開小程序界面，進(jìn)行歌曲的點(diǎn)擊異常事件流：當(dāng)播放按鈕在點(diǎn)擊的過(guò)程中，因網(wǎng)絡(luò)波動(dòng)造成微信不在線的狀態(tài)，導(dǎo)致播放失敗后置條件：系統(tǒng)沒有改變表3.3描述了用戶進(jìn)行歌曲切換時(shí)候的用例活動(dòng)。表3.3用戶進(jìn)行歌曲切換用例名稱：?jiǎn)栴}回答參與者：所有用戶描述：用戶使用小程序，在歌曲播放界面，點(diǎn)擊界面下方的上一曲/下一曲按鈕，可以進(jìn)行音樂的切換，且必須是上一首的歌曲前置條件：用戶成功登錄微信，打開音樂播放小程序，并且打開歌曲播放界面用例功能：用戶歌曲切換功能事件流：用戶已正常登錄微信，在小程序上實(shí)現(xiàn)了歌曲播放，網(wǎng)絡(luò)正常，點(diǎn)擊上一曲/下一曲播放按鈕進(jìn)行音樂切換異常事件流：按鈕在觸發(fā)時(shí)候，因網(wǎng)絡(luò)波動(dòng)造成發(fā)布失敗后置條件：系統(tǒng)沒有改變下面以文字描述進(jìn)行功能需求難點(diǎn)以及實(shí)現(xiàn)的痛點(diǎn)進(jìn)行分析設(shè)計(jì)：隨機(jī)播放模式下，通過(guò)多次點(diǎn)擊音樂切換按鈕，需要真正實(shí)現(xiàn)隨機(jī)的功能，不能是類似順序播放的上一曲、下一曲切換，但是如果是通過(guò)random函數(shù)產(chǎn)生隨機(jī)的數(shù)字進(jìn)行，容易產(chǎn)生index越位，因此隨機(jī)播放模式需要先獲取到當(dāng)前數(shù)據(jù)庫(kù)中的歌曲列表長(zhǎng)度；性能需求分析數(shù)據(jù)準(zhǔn)確度在本系統(tǒng)中，從系統(tǒng)用戶的角度來(lái)分析，因?yàn)橐劳杏谖⑿诺陌踩芾頇C(jī)制，尤其是數(shù)據(jù)庫(kù)直接調(diào)用微信的Json數(shù)據(jù)庫(kù)，所以用戶的數(shù)據(jù)安全是相對(duì)不需要關(guān)心的，但是對(duì)于問(wèn)題展示的內(nèi)容是一定要準(zhǔn)確的，尤其是涉及到不同的人發(fā)表的不同的評(píng)論信息，因此數(shù)據(jù)的準(zhǔn)確性是最重要的，要保證這一塊的內(nèi)容功能的魯棒性足夠強(qiáng)，但是這方面有一定的保障，用戶在操作過(guò)程中不會(huì)受到太大的影響。運(yùn)行速度由于本系統(tǒng)所采用的數(shù)據(jù)庫(kù)較小，而且框架比較成熟，尤其是對(duì)音樂資源和數(shù)據(jù)存儲(chǔ)進(jìn)行分離，只通過(guò)歌曲名稱和id進(jìn)行關(guān)聯(lián)，大大減少了數(shù)據(jù)庫(kù)的運(yùn)行時(shí)間，因此不管是在數(shù)據(jù)處理時(shí)間以及程序的響應(yīng)時(shí)間都達(dá)到了足夠的優(yōu)化內(nèi)容，本系統(tǒng)的性能都是可以直接表現(xiàn)給用戶的。

系統(tǒng)模塊詳細(xì)設(shè)計(jì)系統(tǒng)總體功能框架設(shè)計(jì)對(duì)系統(tǒng)功能模塊的劃分也是要依據(jù)對(duì)需求分析來(lái)開展的，劃分功能模塊時(shí)，如何進(jìn)行模塊之間的低耦合設(shè)計(jì)是考慮的主要問(wèn)題，模塊的規(guī)模要預(yù)先設(shè)想好。根據(jù)需求分析，本系統(tǒng)可劃分為首頁(yè)歌曲歌單展示、歌曲搜索功能、歌曲列表一覽功能、歌曲播放、單曲循環(huán)設(shè)置、隨機(jī)播放設(shè)置、下拉刷新?lián)Q曲、用戶登錄、歌曲切換功能、暫停/重播功能、歌曲時(shí)長(zhǎng)進(jìn)度條展示功能，系統(tǒng)框架設(shè)計(jì)圖如下圖4.1所示：圖4.1整體框架圖系統(tǒng)功能模塊設(shè)計(jì)用戶登錄模塊設(shè)計(jì)基于微信小程序的特性，我們?cè)O(shè)計(jì)只有允許操作平臺(tái)的人才可以使用功能,而小程序的特性就是可以調(diào)用微信的當(dāng)前用戶信息，實(shí)在單點(diǎn)登錄的功能，但是登錄模塊依然是必須的。我們可以這樣設(shè)想：用戶等于進(jìn)入了一個(gè)虛擬的登錄頁(yè)面，填寫用戶數(shù)據(jù)相關(guān)的用戶名密碼完成登錄。登錄模塊設(shè)計(jì)的流程圖，繪制出如圖4.2所示的登錄模塊的流程圖：圖4.2用戶登錄模塊設(shè)計(jì)系統(tǒng)首頁(yè)模塊設(shè)計(jì)用戶登錄到小程序中，系統(tǒng)直接跳轉(zhuǎn)到小程序首頁(yè)，并在跳轉(zhuǎn)過(guò)程中向后臺(tái)請(qǐng)求歌曲列表數(shù)據(jù)，默認(rèn)加載存儲(chǔ)在微信云端系統(tǒng)全部數(shù)據(jù)，前端頁(yè)面設(shè)計(jì)基于WXSS+JS進(jìn)行。功能模塊設(shè)計(jì)圖如下4.3所示：圖4.3系統(tǒng)首頁(yè)展示模塊設(shè)計(jì)歌曲搜索功能設(shè)計(jì)歌曲搜索模塊設(shè)計(jì)通過(guò)ajax技術(shù)，用戶在前端輸入框中輸入相關(guān)歌曲名稱、歌手名稱、歌單名稱，點(diǎn)擊搜索之后，通過(guò)模糊查詢規(guī)則與后臺(tái)數(shù)據(jù)庫(kù)中的數(shù)據(jù)進(jìn)行關(guān)聯(lián)性匹配，如果找到數(shù)據(jù)，則根據(jù)返回的數(shù)據(jù)內(nèi)容，前端展示數(shù)據(jù)。如果找不到后臺(tái)存放的歌曲信息，返回空列表；搜素過(guò)程中，如果因網(wǎng)絡(luò)波動(dòng)造成的請(qǐng)求失敗，則通過(guò)微信應(yīng)用本身的網(wǎng)絡(luò)連接斷開進(jìn)行提示。模塊功能圖如下4.4所示：圖4.4歌曲搜索功能流向圖音樂播放模塊設(shè)計(jì)音樂播放模塊通過(guò)的前置條件是用戶正常點(diǎn)擊了播放按鈕，點(diǎn)擊頁(yè)面上的歌曲列表項(xiàng)，跳轉(zhuǎn)到歌曲播放界面，基于Node.js的數(shù)據(jù)輪詢、長(zhǎng)連接保持特性，在歌曲播放的同時(shí)，后臺(tái)持續(xù)獲取數(shù)據(jù)，數(shù)據(jù)緩存加載的內(nèi)容，在前端通過(guò)歌曲時(shí)長(zhǎng)和進(jìn)度條功能向用戶進(jìn)行展示。模塊功能圖如下4.5所示：圖4.5音樂播放模塊播放模式切換模塊設(shè)計(jì)同音樂播放模塊的前置項(xiàng)相同，播放模式切換模塊前置條件是用戶正常點(diǎn)擊了播放按鈕，點(diǎn)擊頁(yè)面上的歌曲列表項(xiàng)，跳轉(zhuǎn)到歌曲播放界面。通過(guò)點(diǎn)擊“界面左下方的模式切換按鈕，用戶可以進(jìn)行歌曲的隨機(jī)播放模式、重復(fù)播放模式、順序播放模式，在每一種模式切換成功之后，界面的UI圖標(biāo)也隨著變化，并且在不同的模式下點(diǎn)擊界面的上一曲/下一曲按鈕的作用也不同?；竟δ芰鞒虉D如下圖4.6所示：圖4.6播放模式切換模塊功能本章小結(jié)本章節(jié)的系統(tǒng)模塊功能設(shè)計(jì)，充分利用軟件工程的知識(shí)，在頂層設(shè)計(jì)之初就實(shí)現(xiàn)“高內(nèi)聚、低耦合”的特點(diǎn)。并且，先從角色的劃分來(lái)進(jìn)行初步的設(shè)計(jì)，之后從兩個(gè)角色是否有關(guān)聯(lián)性找到共同點(diǎn)，以此作為減少工作量的一方面。然后根據(jù)角色來(lái)劃分的功能模塊，進(jìn)行流程設(shè)計(jì)。充分考慮到了數(shù)據(jù)庫(kù)中外鍵關(guān)聯(lián)的相關(guān)內(nèi)容，相信通過(guò)這樣的設(shè)計(jì)，可以為接下來(lái)系統(tǒng)的具體功能實(shí)現(xiàn)打下良好的基礎(chǔ)。系統(tǒng)實(shí)現(xiàn)根據(jù)本文上述章節(jié)的敘述，從軟件的需求設(shè)計(jì)、數(shù)據(jù)庫(kù)設(shè)計(jì)、功能設(shè)計(jì)、具體功能的分析，均進(jìn)行了非常具體的實(shí)現(xiàn)，本章節(jié)依據(jù)上述章節(jié)的內(nèi)容，進(jìn)行相關(guān)系統(tǒng)功能的具體實(shí)現(xiàn)，主要通過(guò)功能的實(shí)現(xiàn)代碼、實(shí)現(xiàn)截圖進(jìn)行驗(yàn)證展示。用戶登錄模塊實(shí)現(xiàn)小程序在開發(fā)過(guò)程中，通過(guò)獲取用戶輸入的用戶名、密碼，（可以在控制控制臺(tái)中打印用戶的用戶名密碼來(lái)進(jìn)行驗(yàn)證）。在用戶端的呈現(xiàn)效果是：用戶在個(gè)人賬號(hào)界面，直接點(diǎn)擊登錄按鈕，即可在1秒內(nèi)完成登錄和主頁(yè)跳轉(zhuǎn)。實(shí)現(xiàn)效果如下圖5.1所示：圖5.1獲取微信的用戶名密碼及登錄展示小程序獲取用戶賬號(hào)信息（賬號(hào)同步）實(shí)現(xiàn)代碼如下所示：（1）wxml<viewclass="itemView">用戶名：

<inputclass="input"name="userName"placeholder="請(qǐng)輸入用戶名"

bindinput="userNameInput"/>

</view><viewclass="itemView">密

碼：

<inputclass="input"passwordplaceholder="請(qǐng)輸入密碼"

bindinput="passWdInput"/>

</view><viewclass="viewName"style="background-color:#fbf9fe">

<buttonclass="loginBtn"bindtap="loginBtnClick">登錄</button></view>（2）jsPage({

data:{

userName:'',

userPwd:""

},

//獲取用戶輸入的用戶名

userNameInput:function(e){

this.setData({

userName:e.detail.value

})

},

passWdInput:function(e){

this.setData({

userPwd:e.detail.value

})

},

//獲取用戶輸入的密碼

loginBtnClick:function(e){

console.log("用戶名："+this.data.userName+"密碼："+this.data.userPwd);

}

,

//用戶點(diǎn)擊右上角分享

onShareAppMessage:function(){

}})首頁(yè)模塊實(shí)現(xiàn)效果登錄微信之后，點(diǎn)擊小程序logo圖標(biāo)，成功進(jìn)入到主頁(yè)，主頁(yè)展示內(nèi)容包括所有頂部搜索框、輪播圖海報(bào)切換、歌單類別展示、排行榜展示。實(shí)現(xiàn)效果如下圖所示：圖5.2主頁(yè)展示歌曲列表展示實(shí)現(xiàn)效果歌曲列表展示可以通過(guò)首頁(yè)多個(gè)部分實(shí)現(xiàn)跳轉(zhuǎn)：用戶通過(guò)輸入框搜索用戶通過(guò)點(diǎn)擊首頁(yè)歌曲歌單封面跳轉(zhuǎn)之后，以list列表形式展示歌曲的序號(hào)、歌曲的名稱、歌手名稱，功能實(shí)現(xiàn)圖如下所示：圖5.3歌曲列表模塊展示音樂播放模塊實(shí)現(xiàn)效果音樂播放模塊是最能體現(xiàn)本次設(shè)計(jì)的小程序界面友好的一個(gè)模塊，用戶通過(guò)點(diǎn)擊具體的歌曲名稱跳轉(zhuǎn)到該界面，預(yù)先加載界面歌手海報(bào)、歌曲信息，并持續(xù)對(duì)歌曲進(jìn)行緩存，界面同時(shí)展示了歌曲模式切換按鈕、上/下曲播放按鈕。在歌曲播放過(guò)程中，海報(bào)會(huì)進(jìn)行動(dòng)態(tài)的旋轉(zhuǎn)，能夠讓用戶在該界面停留時(shí)間更長(zhǎng)。模塊功能實(shí)現(xiàn)圖如下所示：圖5.3歌曲播放模塊展示播放模式模塊切換實(shí)現(xiàn)效果用戶在歌曲播放界面，通過(guò)點(diǎn)擊“界面左下方的模式切換按鈕，用戶可以進(jìn)行歌曲的隨機(jī)播放模式、重復(fù)播放模式、順序播放模式，在每一種模式切換成功之后，界面的UI圖標(biāo)也隨著變化，并且在不同的模式下點(diǎn)擊界面的上一曲/下一曲按鈕的作用也不同。下圖展示了在歌曲播放界面通過(guò)連續(xù)點(diǎn)擊播放模式按鈕，對(duì)播放模式進(jìn)行切換。用戶同樣可以通過(guò)對(duì)頁(yè)面進(jìn)行刷新操作，來(lái)實(shí)現(xiàn)不同模式下的歌曲切換效果。圖5.5播放模式模塊展示

數(shù)據(jù)庫(kù)設(shè)計(jì)

系統(tǒng)測(cè)試系統(tǒng)在微信小程序開發(fā)者后，在測(cè)試之前分別運(yùn)行雙端的服務(wù)，確保平臺(tái)具有進(jìn)行完整性功能測(cè)試的前提，依據(jù)這個(gè)前提本章制定了下面的測(cè)試計(jì)劃，并記錄了相應(yīng)的測(cè)試結(jié)果。測(cè)試與糾錯(cuò)流程測(cè)試評(píng)價(jià)測(cè)試評(píng)價(jià)糾錯(cuò)系統(tǒng)啟動(dòng)測(cè)試數(shù)據(jù)測(cè)試結(jié)果錯(cuò)誤信息改正信息期望結(jié)果測(cè)試環(huán)境準(zhǔn)備硬件環(huán)境（以此啟動(dòng)手機(jī)模擬器）測(cè)

試

平

臺(tái)

硬

件

配

置核心配件CPUIntel/AMD酷睿i7/Ryzen系列處理器主板技嘉Z97/Z270/X99/990X/X370系列主板顯卡NVIDIAGTX

1080內(nèi)存影馳8GB

DDR4

2400x4/8GB

DDR3

1600x2硬盤浦科特M7V

512GB散熱器超頻3東海X5系統(tǒng)及驅(qū)動(dòng)程序操作系統(tǒng)Microsoft

Windows

10主板驅(qū)動(dòng)Intel/AMD芯片組驅(qū)動(dòng)顯卡驅(qū)動(dòng)NVIDIA顯示驅(qū)動(dòng)DirectX環(huán)境DirectX

9.0c/12幀數(shù)監(jiān)控Fraps

3.5.1軟件環(huán)境：Windows/IOS/Adnroid/Taro/Node.js/微信開發(fā)者工具。測(cè)試方法介紹作為軟件工程中非常重要的組成部分，軟件測(cè)試貫穿在軟件從設(shè)計(jì)到服務(wù)結(jié)束的全生命周期的過(guò)程中。對(duì)于測(cè)試方法，主要分為黑盒和白盒兩種方式的測(cè)試，在系統(tǒng)實(shí)現(xiàn)的過(guò)程中，已經(jīng)進(jìn)行了單元測(cè)試、集成測(cè)試，主要是通過(guò)代碼端的調(diào)試進(jìn)行的，在本文中不做過(guò)多的敘述。本章節(jié)主要介紹系統(tǒng)的功能測(cè)試，通過(guò)黑盒測(cè)試的方式進(jìn)行。系統(tǒng)功能測(cè)試服務(wù)啟動(dòng)冒煙測(cè)試測(cè)試用例名稱雙端服務(wù)啟動(dòng)測(cè)試/服務(wù)冒煙測(cè)試測(cè)試方法手動(dòng)測(cè)試測(cè)試目標(biāo)系統(tǒng)可以正常啟動(dòng)，日志中沒有1級(jí)錯(cuò)誤測(cè)試操作在安卓模擬器中啟動(dòng)小程序，觀察是否可以正常進(jìn)入主頁(yè)，是否有閃退等情況；用戶在IOS系統(tǒng)中啟動(dòng)小程序的服務(wù)，系統(tǒng)可以正常啟動(dòng)，界面可以正常打開。預(yù)期結(jié)果程序運(yùn)行成功，沒有異常的報(bào)錯(cuò)信息拋出，Android端和IOS端均可以正常顯示測(cè)試結(jié)果通過(guò)歌曲播放模式切換測(cè)試測(cè)試用例名稱歌曲播放模式切換測(cè)試測(cè)試方法手動(dòng)測(cè)試測(cè)試目標(biāo)能夠完成歌曲播放模塊的功能需求，無(wú)任何異常信息測(cè)試操作在安卓模擬器中啟動(dòng)小程序，通過(guò)下表1中的測(cè)試用例，逐條數(shù)據(jù)進(jìn)行驗(yàn)證；在Iphone手機(jī)中啟動(dòng)小程序，通過(guò)下表1中的測(cè)試用例，逐條數(shù)據(jù)進(jìn)行驗(yàn)證；預(yù)期結(jié)果根據(jù)測(cè)試用例表中的數(shù)據(jù)項(xiàng)，驗(yàn)證內(nèi)容沒問(wèn)題測(cè)試結(jié)果通過(guò)表STYLEREF1\s6.SEQ表\*ARABIC\s11歌曲播放模塊切換測(cè)試用例表用戶類型播放模式模式切換是否成功提示內(nèi)容使用者隨機(jī)模式是隨機(jī)模式使用者順序模式是順序模式使用者單曲循環(huán)是單曲循環(huán)使用者隨機(jī)模式是隨機(jī)模式使用者上/下曲切換是正常切換歌曲搜索播放測(cè)試測(cè)試用例名稱歌曲切換播放測(cè)試方法手動(dòng)測(cè)試測(cè)試目標(biāo)用戶完美匹配數(shù)據(jù)庫(kù)中的數(shù)據(jù)，并且根據(jù)數(shù)據(jù)庫(kù)中的數(shù)據(jù)進(jìn)行Filter后臺(tái)篩選，并展示到界面，觀察前端數(shù)據(jù)是否錯(cuò)亂測(cè)試操作在安卓模擬器中啟動(dòng)小程序，搜索“夏天的風(fēng)”；在Iphone手機(jī)中啟動(dòng)小程序，搜索“夏天的風(fēng)”；預(yù)期結(jié)果程序運(yùn)行成功，沒有異常的報(bào)錯(cuò)信息拋出，能夠?qū)λ阉鞯母枨M(jìn)行準(zhǔn)確的列表展示測(cè)試結(jié)果通過(guò)歌曲播放模式測(cè)試測(cè)試用例名稱歌曲播放模式測(cè)試測(cè)試方法手動(dòng)測(cè)試測(cè)試目標(biāo)可以正常播放音樂測(cè)試操作問(wèn)題發(fā)布者在安卓模擬器中啟動(dòng)小程序，對(duì)音樂進(jìn)行正常的播放；問(wèn)題發(fā)布者在Iphone手機(jī)中啟動(dòng)小程序，對(duì)音樂進(jìn)行正常的播放；預(yù)期結(jié)果程序運(yùn)行成功，沒有異常的報(bào)錯(cuò)信息拋出，支持測(cè)試目標(biāo)中的內(nèi)容。測(cè)試結(jié)果通過(guò)意見反饋功能測(cè)試測(cè)試用例名稱意見反饋功能測(cè)試測(cè)試方法手動(dòng)測(cè)試測(cè)試目標(biāo)用戶只要登錄小程序之后，就可以點(diǎn)擊個(gè)人主頁(yè)的意見反饋按鈕，輸入相關(guān)內(nèi)容，點(diǎn)擊提交，完成意見反饋。測(cè)試操作根據(jù)音樂播放模塊設(shè)計(jì)流程步驟進(jìn)行；預(yù)期結(jié)果程序運(yùn)行成功，音樂沒有異常的報(bào)錯(cuò)信息拋出，進(jìn)度條根據(jù)歌曲的進(jìn)度也在正常的進(jìn)行，支持測(cè)試目標(biāo)中的內(nèi)容。測(cè)試結(jié)果通過(guò)測(cè)試分析本次設(shè)計(jì)開發(fā)的音樂播放小程序時(shí)借鑒了國(guó)內(nèi)外優(yōu)秀小程序開發(fā)過(guò)程的設(shè)計(jì)，從需求進(jìn)行統(tǒng)一的安排，再到系統(tǒng)實(shí)現(xiàn)、系統(tǒng)測(cè)試等過(guò)程均能夠保證基本的功能沒有明顯bug，從界面到系統(tǒng)設(shè)計(jì)都保證了普通用戶以及管理員用戶能夠方便操作。系統(tǒng)的主要特點(diǎn)和優(yōu)點(diǎn)歸納如下：（1）本系統(tǒng)用的移置性和針對(duì)性都比較高，因?yàn)獒槍?duì)性高可以提供更好的服務(wù)而移置性可以在多個(gè)系統(tǒng)上運(yùn)行，更給客戶帶來(lái)了極大的方便。（2）內(nèi)容全面但是操作界面不會(huì)很復(fù)雜，設(shè)計(jì)上很多都做了自動(dòng)跳轉(zhuǎn)，其操作方便，用戶界面友好，能夠上網(wǎng)的人都可以很好的進(jìn)行操作。經(jīng)過(guò)對(duì)總體測(cè)試分析，基于微信小程序的音樂播放系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)滿足用戶的要求和需求。功能齊全，操作簡(jiǎn)單，產(chǎn)品運(yùn)行性能良好。

總結(jié)與展望從該系統(tǒng)設(shè)計(jì)的整體來(lái)看，本次設(shè)計(jì)開發(fā)的音樂播放系統(tǒng)操作簡(jiǎn)單、平滑性好，用戶體驗(yàn)度良好。又因?yàn)楣δ鼙容^清晰，所以系統(tǒng)功能的魯棒性也是可以得到保障的。相信本次開發(fā)設(shè)計(jì)的系統(tǒng)會(huì)給用戶帶來(lái)非常直觀舒服的使用。但是在設(shè)計(jì)的過(guò)程中，對(duì)于界面UI的設(shè)計(jì)、頁(yè)面主體的的多樣化選擇方面還需要進(jìn)行優(yōu)化。比如：設(shè)計(jì)多種不同風(fēng)格的主題，提供用戶在不同的節(jié)假日以及發(fā)布的問(wèn)題再得到解答之后的主頁(yè)色彩變化和通知功能。畢業(yè)論文終稿修訂在新冠肺炎疫情期間，2020年剛剛開年，一場(chǎng)疫情讓本該及時(shí)返校的