【音樂小程序的開發(fā)與設(shè)計(jì)5300字（論文）】

音樂小程序的開發(fā)與設(shè)計(jì)摘要伴隨著互聯(lián)網(wǎng)的高速發(fā)展，微信推出了讓人萬眾矚目微信小程序，用微信小程序來給我們提供便利的服務(wù)，便利了人們的生活與日常出行。其次微信小程序避免了下載的需求，做到了用完即走。傳統(tǒng)的音樂播放器過于臃腫與繁瑣，為滿足人們的娛樂需求，方便用戶可以隨時(shí)通過只能終端任意聽取音樂，決定使用微信開發(fā)者工具開發(fā)出一款輕量級(jí)與簡便的音樂播放器。本文采用Web等前端知識(shí)，設(shè)計(jì)實(shí)現(xiàn)音樂列表播放，視頻音樂推薦播放，歌詞，進(jìn)度條等功能。通過這些便捷的功能提供高質(zhì)量的音樂享受體驗(yàn)。通過小程序使播放器運(yùn)行流暢，使用便捷，安全穩(wěn)定。讓其成為一款深受用戶喜歡且高效的微信小程序。關(guān)鍵詞：微信，微信小程序，音樂播放器目錄摘要 II第1章緒論 11.1選題依據(jù) 11.2研究現(xiàn)況與意義 1第2章開發(fā)技術(shù)簡介 22.1開發(fā)環(huán)境與工具 22.2相關(guān)技術(shù)簡介 22.2.1PHP 22.2.2MySQL 22.2.3B/S結(jié)構(gòu) 2第3章需求分析與設(shè)計(jì) 43.1需求分析 43.1.1功能結(jié)構(gòu)設(shè)計(jì) 43.1.2業(yè)務(wù)流程設(shè)計(jì) 43.2數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì) 8第4章系統(tǒng)詳細(xì)設(shè)計(jì) 134.1前端設(shè)計(jì)與開發(fā) 134.2后臺(tái)功能開發(fā) 23第5章系統(tǒng)測試 305.1性能測試 305.2用例測試 315.3測試結(jié)論 32總結(jié) 33參考文獻(xiàn) 34緒論開發(fā)背景伴隨著互聯(lián)技術(shù)與智能手機(jī)的高速發(fā)展與普及，人們的生活方式轉(zhuǎn)變?yōu)榫€上利用智能終端和小程序?yàn)槲覀兲峁┓?wù)，通過這些工具便捷了人們的日常生活，例如：網(wǎng)購、付費(fèi)、聊天、音樂等。人們的生活方式發(fā)生了巨大的變化。曾經(jīng)風(fēng)靡一時(shí)的MP3、MP4音樂播放器等已經(jīng)被時(shí)代所淘汰，而現(xiàn)在部分音樂APP過于繁瑣冗雜，音樂小程序的出現(xiàn)提供了更好的選擇。本文利用微信開發(fā)者工具開發(fā)一款便捷的小程序，音樂播放器，來滿足人們的日常音樂需求。通過開發(fā)音樂小程序，人們可以下載到小程序中來傾聽便利的音樂，在如此快節(jié)奏的生活中也可以在閑暇時(shí)享受一首歌曲。1.1.1本文工作來源鑒于當(dāng)前微信的火爆以及小程序的大范圍推廣使用，目前音頻類的小程序前景很大，所以我選擇《基于微信小程序的音樂播放器的設(shè)計(jì)與實(shí)現(xiàn)》來作為我的畢業(yè)設(shè)計(jì)。選題的目的與意義音樂,作為藝術(shù)的重要組成部分,它的意義是我們生活和情緒的調(diào)節(jié)器,以及我們內(nèi)心的另一面。它是我們心靈的彼岸，精神的家園。在如今快節(jié)奏的時(shí)代，適當(dāng)?shù)耐Ｏ履_步去聆聽一首慢節(jié)奏的音樂，從而讓我們的生活慢下來，這是一件奢侈的事。而隨著近十年來智能終端的普及以及網(wǎng)絡(luò)的快速發(fā)展，很多產(chǎn)品的使用都已經(jīng)從線下轉(zhuǎn)到線上。過去的DVD、CVD、Mp3等早已被淘汰，在智能手機(jī)成為互聯(lián)網(wǎng)潮流工具的時(shí)代，各種各樣的音樂播放器以及相關(guān)App讓人感到過目不暇，其過于龐大的內(nèi)部結(jié)構(gòu)分也顯得十分臃腫，因此選擇一個(gè)簡單方便并且實(shí)用的工具成為新一代音樂播放器的載體就顯得如此重要。而2011年微信這個(gè)國民APP的問世，為如此便捷的程序打下了有利條件。國內(nèi)發(fā)展在2016年的1月11號(hào)，微信之父-張小龍正式宣布，微信正在全力研發(fā)微信小程序，用來滿足用戶的小而微、個(gè)性化、低頻等需求服務(wù)。早在幾年前微信小程序便成為了街頭小巷探討的話題。小程序基于月活躍用戶9億人次的微信生態(tài)中，流量巨大，入口頗多，功能簡單好用。小程序的發(fā)展歷程如下：測試期：2016年11月，騰訊高級(jí)副總裁、微信之父張小龍透露，微信內(nèi)部在研究將在訂閱號(hào)和服務(wù)號(hào)外新設(shè)微信應(yīng)用號(hào)，用于app的推廣。緊接著2016年9月21日晚間，微信公眾平臺(tái)陸續(xù)對(duì)外發(fā)送小程序內(nèi)側(cè)邀請(qǐng)。引流期：11月3日晚間，微信團(tuán)隊(duì)宣布，微信小程序開啟對(duì)外公測，開發(fā)者可以登錄微信公眾平臺(tái)申請(qǐng)。跳一跳小程序的問世為其奠定了夯實(shí)的基礎(chǔ)，微信小程序在用戶中傳播開，讓更多的人知道了小程序的出現(xiàn)。爆發(fā)期：伴隨著跳一跳火便全網(wǎng)，許多用戶發(fā)現(xiàn)小程序的商機(jī)。2018年8月1日至12月31日，小程序提升了開發(fā)主流水的上調(diào)，廣告收入分成比列優(yōu)化上調(diào)，單日流水在30w到100w區(qū)間提升30%到50%。小程序迎來快速上升的時(shí)代。國外發(fā)展在2013年3月份，F(xiàn)acebook推出了JS的框架React，并在兩年后推出基于JavaScript的開源框架ReactNative,它的官方文檔是這樣解釋的：ReactNative能夠讓你在JavaScript和React的基礎(chǔ)上獲得完全一致的開發(fā)體驗(yàn)，構(gòu)建世界一流的原生APP，ReactNative著力于提高多平臺(tái)開發(fā)的開發(fā)效率——僅需學(xué)習(xí)一次，編寫任何平臺(tái)(Learnonce,Writeanywhere)。經(jīng)過多方面的完善，ReactNative成為全球跨平臺(tái)開發(fā)的主流框架。我們現(xiàn)在所熟知的微信小程序就是基于此框架下。在后續(xù)的2016年之中，F(xiàn)acebook再次推出了InstantArticles內(nèi)容平臺(tái)，該平臺(tái)主要作用是來提升文章的加載速度，方便用戶閱讀的速率，不需要跳轉(zhuǎn)網(wǎng)站便可以閱讀完剩余完章，微信小程序在文章的閱讀方面也借鑒了其相關(guān)內(nèi)容。第2章開發(fā)技術(shù)簡介2.1開發(fā)環(huán)境與工具開發(fā)環(huán)境：Windows、微信公眾平臺(tái)開發(fā)工具:微信開發(fā)者工具2.2相關(guān)技術(shù)簡介微信開發(fā)者工具是微信官方提供的專門用來針對(duì)小程序的開發(fā)工具，集中了模擬器、編輯器、調(diào)試器、云開發(fā)、調(diào)試、預(yù)覽和上傳等功能。關(guān)于微信開發(fā)工具的詳細(xì)介紹，微信官方團(tuán)隊(duì)也在微信公眾平臺(tái)上發(fā)布了微信小程序的發(fā)布流程、開發(fā)文檔、社區(qū)以及小程序的運(yùn)營和小程序設(shè)計(jì)指導(dǎo)，能幫助開發(fā)者更快速簡單的上手學(xué)習(xí)，高效率地開發(fā)出微信小程序。啟動(dòng)工具時(shí)，開發(fā)者需要使用已在后臺(tái)綁定成功的微信號(hào)打開掃一掃掃描二維碼6登錄，后續(xù)所有的操作都會(huì)基于這個(gè)微信的賬號(hào)，該開發(fā)者就是該小程序的管理員。程序調(diào)試主要有三大功能區(qū)：模擬器、編輯器和調(diào)試器。（1）模擬器：模擬器模擬微信小程序在手機(jī)端上的具體表現(xiàn)，通過手機(jī)掃碼后即可顯示出PC端的操作界面，進(jìn)行和PC端相同的操作。（2）編輯器：就是編寫代碼的文件存放地，主要有app.js、app.json、app.wxss。包括最基本的四類小程序語言：WXML、WXSS、JS和JSON。（3）調(diào)試器：調(diào)試器有10個(gè)功能從左到右分別是：Console、Sources、Network、Security、AppData、Audits，還有四個(gè)隱藏在下拉列的Sensor、Storage、Trace以及WXML第3章需求分析與設(shè)計(jì)3.11需求分析我們現(xiàn)在正處在一個(gè)信息高速發(fā)展的互聯(lián)網(wǎng)時(shí)代，信息每天都在呈現(xiàn)爆炸性的增長和傳播。而移動(dòng)端設(shè)備也正在逐漸取代PC端，相信用不了移動(dòng)端尤其是智能手機(jī)將會(huì)完全取代PC端設(shè)備。而手機(jī)最主要的就是安裝在上面的各大App。其中有一款A(yù)PP我們相當(dāng)熟悉，基本上沒有人不使用的，那就是微信這款國民超級(jí)APP，而微信當(dāng)中的小程序現(xiàn)在也已經(jīng)成為人們?nèi)粘Ｉ钪斜夭豢缮俚膽?yīng)用。本次畢設(shè)中的系統(tǒng)是基于微信開發(fā)者平臺(tái)的微信小程序音樂播放器，在目前的市場當(dāng)中同類型的產(chǎn)品較少，為了滿足當(dāng)前市場的空缺以及更好的方便用戶體驗(yàn)，加上自己對(duì)于音樂的喜愛，便選擇了該類型的小程序作為本次畢業(yè)設(shè)計(jì)。除了上述理由，本次選擇小程序開發(fā)音樂播放器而不選擇App開發(fā)的原因還有如下幾點(diǎn)，成本考慮，也是本次選擇小程序開發(fā)的重要原因：①小程序的開發(fā)在多個(gè)終端都適用，而相對(duì)的App則只能在手機(jī)上使用，并且App的開發(fā)成本較小程序要大的多。②小程序的開發(fā)周期一般是兩周，而一AP的開發(fā)則是一個(gè)月。（1）技術(shù)考慮①App的開發(fā)需要專業(yè)的技術(shù)團(tuán)隊(duì)以及長期的維修，試錯(cuò)的成本高。而小程序只需擁有一定的前端語言基礎(chǔ)，再加上網(wǎng)絡(luò)課程的學(xué)習(xí)或者是根據(jù)官方文檔就可自行開發(fā)了。②App審核比較復(fù)雜，要向多個(gè)應(yīng)用商店提交審核請(qǐng)求，手續(xù)十分繁瑣；而小程序只需提交上傳到微信公眾平臺(tái)審核即可。（2）市場考慮小程序現(xiàn)在是一個(gè)新興產(chǎn)業(yè)，有很大的市場，在很多地方都可以用到它，但是App在市場中基本趨于飽和，拓寬市場沒有太大機(jī)會(huì)。（3）用戶考慮①小程序的使用便攜度遠(yuǎn)遠(yuǎn)優(yōu)于App，它無需下載就可用，隨用隨走。并且有多個(gè)入口：使用過后在微信首頁的上拉處以及發(fā)現(xiàn)頁的小程序處都可以找到，十分方便用戶下次進(jìn)入使用。②小程序可以通過微信群、朋友圈、公眾號(hào)等渠道推廣，而App則會(huì)頻繁給用戶推送廣告，從而造成不必要的困擾降低用戶的體驗(yàn)。最后本次開發(fā)的系統(tǒng)十分貼近生活，并且有很大的實(shí)用性與簡易性，操作簡單，上手方便。方便可以滿足那些平時(shí)喜歡聽音樂的人，并且加載快速用完即走，更優(yōu)于平時(shí)的原生態(tài)音樂App提高時(shí)間的利用率。3.2功能模板設(shè)計(jì)系統(tǒng)主要包括以下三個(gè)模塊：（1）發(fā)現(xiàn)模塊：有輪播圖，圖標(biāo)導(dǎo)航，推薦歌曲板塊，排行榜板塊，每日推薦列表，可以實(shí)現(xiàn)歌曲播放，查看歌詞和評(píng)論等功能。（2）視頻模塊：有頭部搜索，導(dǎo)航模塊，視頻列表，分享和收藏，可以實(shí)現(xiàn)視頻播放等功能。（3）我的模塊：有登錄驗(yàn)證（前端+后端），登錄成功即跳轉(zhuǎn)個(gè)人中心，可以實(shí)現(xiàn)播放歷史記錄等功能?；谖⑿判〕绦虻囊魳凡シ牌飨到y(tǒng)的功能模塊設(shè)計(jì)圖，如下圖4-1所示3.3界面設(shè)計(jì)3.3.1主頁1、其中包含banner輪播圖、圖標(biāo)導(dǎo)航區(qū)域、推薦歌曲模塊。整體實(shí)現(xiàn)輪播效果3.3.2視頻頁1、有頭部搜索區(qū)域點(diǎn)擊跳轉(zhuǎn)至搜索界面。2、導(dǎo)航模塊動(dòng)態(tài)獲取數(shù)據(jù)。3.3.3個(gè)人中心頁1、有頭部模塊用戶未登錄顯示默認(rèn)頭像圖片，及游客姓名最近播放模塊用戶登錄后顯示用戶最近播放記錄第四章系統(tǒng)實(shí)現(xiàn)4.1.1功能模塊實(shí)現(xiàn)根據(jù)功能模塊設(shè)計(jì)，實(shí)現(xiàn)頁面各功能具體以代碼表示。4.1.2主頁進(jìn)入主頁后可以點(diǎn)擊搜索音樂、每日推薦、歌單、排行榜進(jìn)行歌曲播放，也可點(diǎn)擊推薦歌曲和排行榜板塊進(jìn)行滑動(dòng)和播放，排行榜分類有0-20共21種，需要取前5種分類顯示，整體實(shí)現(xiàn)輪播效果，當(dāng)前滑塊中顯示后一個(gè)滑塊部分內(nèi)容效果圖如下代碼如下：//獲取排行榜列表lettoplist=awaitrequest('/toplist')toplist.list.Splice(5)toplist=toplist.Listletindex=0letlistItem={};lettopList=[];//查詢5個(gè)排行榜，循環(huán)五次while(index<5){//根據(jù)排行榜的id通過查詢歌單查詢排行榜詳情lettopListData=awaitrequest('/playlist/detail',{id:toplist[index].id})allTopList.push(topListData.Playlist.tracks)//跳轉(zhuǎn)至排行榜頁面goToRanking(){wx.navigateTo({url:'/pages/ranking/ranking'})}4.1.3視頻頁進(jìn)入視頻頁可以根據(jù)歌曲導(dǎo)航進(jìn)行對(duì)應(yīng)的視頻預(yù)覽，點(diǎn)擊視頻預(yù)覽會(huì)跳轉(zhuǎn)視頻詳情頁并進(jìn)行播放，同時(shí)還可以查看留言評(píng)論，點(diǎn)擊評(píng)論右上角可以分享視頻，圖片替代Video標(biāo)簽性能優(yōu)化，代碼如下：//封裝單頁視頻列表數(shù)據(jù)的請(qǐng)求asyncrequestPageList(pageNum){letresult=awaitrequest('/video/group',{id:this.Data.videoGroupList[pageNum].id,offset:offset*8})offset++;result=result.datareturnresult;},//點(diǎn)擊視頻事件playVideo(event){this.backgroundAudioManager=wx.getBackgroundAudioManager();this.backgroundAudioManager.Pause();constapp=getApp();4.1.4個(gè)人中心頁用戶未登錄顯示默認(rèn)頭像圖片和昵稱，用戶登錄顯示用戶頭像及賬號(hào)名，顯示用戶最近播放記錄、喜歡的音樂、創(chuàng)建的歌單、收藏的歌單。點(diǎn)擊它們就會(huì)跳轉(zhuǎn)相應(yīng)的歌曲列表，效果圖如下：代碼如下：<viewclass="info-box"><textclass="username">{{userInfo.nickname?userInfo.nickname:"游客"}}</text></view>//獲取用戶播放記錄的功能函數(shù)asyncgetUserRecentPlayList(userId){letresult=awaitrequest('/user/record',{uid:userId,type:1})//console.Log(result);letrecentPlaylist=[];if(result.weekData.length>10){letindex=0;recentPlaylist=result.weekData.splice(0,10).map(item=>{item.id=index++;returnitem;})}else{letindex=0recentPlaylist=result.weekData.map(item=>{item.id=index++;returnitem;})}第五章系統(tǒng)測試5.1測試目的程序測試的目的是為了發(fā)現(xiàn)當(dāng)前系統(tǒng)存在哪些地方的缺陷與不足。在之前的系統(tǒng)開發(fā)中，各個(gè)階段多少存在著大大小小的問題和錯(cuò)誤，而測試正是為了發(fā)現(xiàn)這些錯(cuò)誤，并且后面加以改正的過程。一個(gè)成功的測試是在于發(fā)現(xiàn)了至今未發(fā)現(xiàn)的錯(cuò)誤。5.2測試方法而測試的方法，是無窮無盡的，而且系統(tǒng)需要測試的方面也很多，測試人員不可能發(fā)現(xiàn)系統(tǒng)中所有的缺陷。所以本文采用開發(fā)者工具自帶的測試——真機(jī)測試。5.3測試流程該系統(tǒng)的具體測試流程如下：打開微信開發(fā)者工具，選擇音樂播放器小程序，然后管理員或用戶掃碼進(jìn)行登錄，看是否能掃碼成功。不成功的在瀏覽器上打開微信公眾平臺(tái)，申請(qǐng)讓管理員添加用戶，登錄成功的即可開始操作程序。點(diǎn)擊“編譯”按鈕，程序開始運(yùn)行，首先進(jìn)入的是主頁面——首頁界面?？梢钥吹绞醉摱际峭扑]的榜單，隨便點(diǎn)擊某一個(gè)榜單看是否響應(yīng)，響應(yīng)以后可以看到會(huì)顯示出該榜單中的全部歌曲，隨便點(diǎn)擊某一首歌曲進(jìn)行播放，測試歌曲的播放暫停進(jìn)度條等功能。接著測試主頁面菜單欄中的其他控件是否正常。點(diǎn)擊“發(fā)現(xiàn)”按鈕查看動(dòng)態(tài)能否正常使用。點(diǎn)擊“我的”按鈕查看當(dāng)前用戶的個(gè)人信息。在該“我的”頁面還可以點(diǎn)擊歷史播放查看播放過的歷史歌曲，點(diǎn)擊小程序碼查看音樂播放器小程序的二維碼。結(jié)論一，分析總結(jié)本論文分別從需求分析、功能模塊總體設(shè)計(jì)、系統(tǒng)實(shí)現(xiàn)和系統(tǒng)測試四個(gè)方面詳細(xì)介紹了基于微信小程序的音樂播放器系統(tǒng)開發(fā)設(shè)計(jì)過程。本系統(tǒng)的設(shè)計(jì)目的是為了開發(fā)出一款輕量級(jí)簡潔實(shí)用、隨時(shí)可用，用完即走的高效化音樂播放器，適用于任何人群，尤其是喜愛音樂的人或是忙碌一天需要聽