一款輕應(yīng)用音樂APP的設(shè)計開發(fā)

鄭明輝，孔佳利,閻雪

(1.山東華宇工學(xué)院 機(jī)械工程學(xué)院，山東 德州 253034；2.德州市工業(yè)機(jī)器人控制重點實驗室，山東 德州 253034)

0 引 言

隨著智能手機(jī)的普及，用戶對手機(jī)客戶端的音樂APP的需求也是日益增加，除了幾大熱門APP，一些輕量級的音樂APP 也逐漸興起，本文開發(fā)的這款米來音樂APP 就是一典型的輕應(yīng)用，對手機(jī)內(nèi)存的占用量極少，以少的運行內(nèi)存來實現(xiàn)更豐富多彩的界面和內(nèi)容，給用戶在享受音樂的同時帶來更大的視覺盛宴，這也對安卓前端開發(fā)的技術(shù)有了更高的要求。在Web2.0 在這種大趨勢下應(yīng)運而生，消費者對手機(jī)APP 的追求不僅局限于外表的美觀，更開始尋求適合自己的手機(jī)，并且占用內(nèi)存少，功能還齊全，不會影響手機(jī)的使用速度，輕應(yīng)用順勢而生。

目前較流行的框架如Vue，React,Angular 等，對于前端開發(fā)者來說，Vue 框架最簡便，清晰，內(nèi)存占用小，實現(xiàn)的功能齊全，共享組件也變得越來越多。本文設(shè)計開發(fā)的這款米來音樂播放器APP 就使用使用Vue 為基本框架，設(shè)計工具選擇Webpack，使其具有輕便，內(nèi)存占用小，功能齊全，界面美觀的效果，提高用戶的滿意度和使用舒適度。

1 開發(fā)背景介紹

米來音樂播放器是一款安卓手機(jī)輕應(yīng)用，其基本功能具有搜索、登錄、注冊、評論、轉(zhuǎn)發(fā)等，外觀界面的設(shè)計采用經(jīng)典前端語言Html 和Javascript 和CSS 來進(jìn)行，WebView的支持采用插件形式。初始擬嵌套iframe 使用css 加div，但最后決定使用Vue 框架，最初采用jquery，但隨著項目進(jìn)行，jQuery 對于一些比較小的項目確實可以做到快速開發(fā)，不過近幾年的jQuery 也變得復(fù)雜龐大了，有很多用不到的功能。對jQuery 進(jìn)行簡化的項目就顯得比較有意義。而且如果全部依靠dom 操作使用jquery 來做界面（例如對form 表單的操作，把json 對象在后臺輸出，再用jquery loop出來一個列表）的話，對以后數(shù)據(jù)和代碼的修改以及系統(tǒng)的維護(hù)都會造成一定的麻煩。如果一改頁面結(jié)構(gòu)，很多依賴標(biāo)簽的選擇器，js 即隨之大改。還有就是一旦做好形成以后，就很不好繼續(xù)修改jQuery 的代碼，如果真有項目特殊需求，要改一下jQuery 代碼來用就顯得很麻煩。

隨著時代發(fā)展迅速，全球技術(shù)日益進(jìn)步，隨著智能手機(jī)客戶端技術(shù)的逐漸成熟，誕生了好多不錯的框架供使用者進(jìn)行前端的開發(fā)，比如用LESS 動態(tài)語言編寫的Bootstrap 框架，fbootstrapp 基于Bootstrap 和提供相同的功能作為臉譜網(wǎng)iframe 應(yīng)用程序設(shè)計。由Metro UI CSS 引發(fā)的創(chuàng)作靈感成就了bootmetro 框架，它主要是應(yīng)用在創(chuàng)建Windows 8 Metro風(fēng)格的網(wǎng)站的建立上，是在Bootstrap 框架的基礎(chǔ)上構(gòu)建的。對Bootstrap 稍加變化就形成了kickstrap，并在此基礎(chǔ)上，有許多簡單實用的框架，如應(yīng)用程序，主題和附加功能。本文開發(fā)的這款米來音樂APP 采用前后端分離的方式，Vue全部涉及，Node.js 提供后臺接口，MongoDB 做數(shù)據(jù)庫。

2 設(shè)計與開發(fā)

2.1 Vue 框架簡介

Vue 框架的本質(zhì)是一個JavaScript 的MVVM 庫，其構(gòu)建思想并不復(fù)雜，就是靠組件化和數(shù)據(jù)進(jìn)行驅(qū)動。Vue 簡潔高效使其在眾多的框架中脫穎而出，備受技術(shù)人員的青睞。隨著智能手機(jī)時代的到來，對前端的開發(fā)需求更是日益增長。

2.2 設(shè)計思路

首先明確需求，即輕便、占用內(nèi)存小、基本功能齊全，頁面界面華麗。開發(fā)類型屬于個人APP 的使用，開發(fā)平臺主要是基于大部分市場上的安卓手機(jī)，具體的功能主要有搜索，個人中心，智能推薦等三大模塊，經(jīng)過前面的分析介紹主要采用Vue 框架來實現(xiàn)前端的需求。輸出此交互方案后，經(jīng)教授指導(dǎo)和同事討論，決定可行，開發(fā)的技術(shù)中等難度，可行性很大。

在項目技術(shù)開發(fā)和視覺規(guī)劃階段，主要著手于 APP 的界面UI 設(shè)計和用戶體驗的UE 設(shè)計，在對整體格調(diào)確定后形成初步的效果圖，經(jīng)過查閱資料和對市場分析，進(jìn)行第二次修改確定高保真視覺圖，其次，正式啟動項目，按照先進(jìn)行前端的開發(fā)，然后進(jìn)行程序的開發(fā)，最后進(jìn)行接口對接的流程來進(jìn)行，使用submit 編輯器編輯的，Vue 框架中的關(guān)鍵的v-for指令的應(yīng)用主要體現(xiàn)在暫停、開始、上一首、下一首上的使用，通過設(shè)置MusicService類，使用play、pause、stop的方法來實現(xiàn)，通過設(shè)計v-for 指令，實現(xiàn)的效果如圖1所示。

圖1 實現(xiàn)效果圖

通過靈活應(yīng)用Vue 框架中的核心指令v-for 指令，將前端界面的大部分代碼和語法進(jìn)行了簡化，方便下一步渲染播放列表的渲染。將一個Scroll 組件的data 屬性綁定數(shù)據(jù)，米來音樂App 的數(shù)據(jù)就從服務(wù)器中獲取，獲取到數(shù)據(jù)后進(jìn)行渲染的頁面，如圖2所示。

圖2 播放列表渲染圖

3 關(guān)鍵技術(shù)介紹

3.1 Vue-cli

Vue-cli 是一種腳手架工具，復(fù)雜項目啟動時，80%都會采用Vue-cli，因為其快捷，高效。在對運行環(huán)境進(jìn)行開發(fā)的時候，依賴包列表和相關(guān)的配置文件會從Github 中下載。

整個APP 的總體頁面布局如圖3所示，第一欄上面放置音樂名稱，個人中心和返回按鈕，它們之間的切換采用Router-view。每一個不同的敞口界面都分為兩個組件，Header 和Body，Header 主要是控制它們的共性，一樣的地方，而本文開發(fā)的這款A(yù)PP 更傾向于個性化，每一個頁面又不盡相同，這部分就是Body 控制的，每一個界面的不同之處放在各自的Body 里，廣告部分和歌手列表這兩個板塊的構(gòu)建是聽過對代碼的復(fù)用來實現(xiàn)的，由此可見Vue 框架的方便之處，可以減少很多的工作量和代碼，使代碼的利用率升高?？紤]到對不同的系統(tǒng)兼容，采用Vux 來對界面進(jìn)行兼容性處理，將不兼容性降到最小。

圖3 系統(tǒng)架構(gòu)圖

3.2 JSONP

JSONP 是一種非正式傳輸協(xié)議，該協(xié)議的一個要點就是允許用戶傳遞一個callback 參數(shù)給服務(wù)端，然后服務(wù)端返回數(shù)據(jù)時會將這個callback 參數(shù)作為函數(shù)名來包裹住JSON數(shù)據(jù)，這樣客戶端就可以隨意定制自己的函數(shù)來自動處理返回數(shù)據(jù)，本項目中的關(guān)鍵部分JSONP 代碼如下：

3.3 better-scroll

輪播圖部分使用 better-scroll 插件，將輪播圖部分抽象成為一個組件，使用solt 插槽往里面填充內(nèi)容，使用插件的內(nèi)容的相關(guān)api 和輪播組件里面的 props 的控制圖片的輪播速度間隔時間和是否輪播，在此基礎(chǔ)上增加dots 也就是圖片底部的圓點，監(jiān)聽window 的resize 事件當(dāng)用戶改變屏幕的時候輪播效果不會發(fā)生改變。關(guān)鍵部分代碼如下：

3.4 支撐層

項目目前共四個分支：

——master //主分支,第二版代碼

——version1 //第一版代碼

項目技術(shù)棧：vue+vuex+vue-router+axios+better-scroll

——version2 //第二版代碼

項目亮點：支持三種主題顏色，頁面更友好，對不同尺寸屏幕也做了一定兼容，內(nèi)部代碼相較于第一版也有比較大的優(yōu)化。

技術(shù)棧：vue+vuex+vue-router+axios+element-ui+vbestui(自己封裝的組件庫)+postcss-pxtorem+vue-lazyload

——dev-player //目標(biāo)是封裝一個獨立的音樂播放器

技術(shù)棧：react+ts+hooks+mobx+antd

v3.31.0 后支持Node.js 調(diào)用,導(dǎo)入的方法為module 內(nèi)的文件名,返回內(nèi)容包含status 和body,status 為狀態(tài)碼,body為請求返回內(nèi)容,參考代碼module_example 文件夾下的test.js

該項目的數(shù)據(jù)支撐共分為3 層，整個項目的主體框架基于Vue.js2.0，主要由腳手架工具Vue-cli、自動化構(gòu)建工具Webpack 和代碼檢查工具eslint 進(jìn)行支持，架構(gòu)由5 部分支撐：基礎(chǔ)組件庫、狀態(tài)管理Vuex、路由Vue-Router、服務(wù)端通信axios&jsonp 以及第三方插件組。如圖4所示。

圖4 系統(tǒng)支撐層

4 結(jié) 論

利用Vue 框架和Webpack 把凌亂分散的代碼整理得簡潔明了，縮小了代碼量，使代碼結(jié)構(gòu)更加清晰，編輯改動也十分容易。通過使用Vue 框架和Webpack 組件對整個米來音樂APP 的前端頁面代碼進(jìn)行整合梳理后，整個APP 的大小由之前的23 MB 縮小到了9.2 MB，大大減少了對手機(jī)內(nèi)存的占用，使整個應(yīng)用更加清爽而且代碼質(zhì)量明顯提高，維護(hù)更加方便。