一款輕應用音樂APP的設計開發

鄭明輝，孔佳利,閻雪

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

0 引 言

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

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

1 開發背景介紹

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

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

2 設計與開發

2.1 Vue 框架簡介

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

2.2 設計思路

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

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

圖1 實現效果圖

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

圖2 播放列表渲染圖

3 關鍵技術介紹

3.1 Vue-cli

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

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

圖3 系統架構圖

3.2 JSONP

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

3.3 better-scroll

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

3.4 支撐層

項目目前共四個分支：

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

——version1 //第一版代碼

項目技術棧：vue+vuex+vue-router+axios+better-scroll

——version2 //第二版代碼

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

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

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

技術棧：react+ts+hooks+mobx+antd

v3.31.0 后支持Node.js 調用,導入的方法為module 內的文件名,返回內容包含status 和body,status 為狀態碼,body為請求返回內容,參考代碼module_example 文件夾下的test.js

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

圖4 系統支撐層

4 結 論

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