安寧

（成都職業(yè)技術(shù)學(xué)院，四川 成都 610000）

一、引言

近年來，前端技術(shù)發(fā)展迅速，HTML、CSS、JavaScript等都有質(zhì)的飛躍。隨著web技術(shù)的發(fā)展，大前端的概念也不斷被拋出，網(wǎng)絡(luò)應(yīng)用的開發(fā)面向更多終端、更多平臺(tái)、更多領(lǐng)域。html5具有更高的兼容性，支持多媒體，加入了更多豐富的功能如表單驗(yàn)證、拖拽等；CSS3具有了編程能力，JavaScript方面也出現(xiàn)了更多的框架結(jié)構(gòu)，例如gulp、less、node.js、react、vue.js、d3.js等。其中，Node.js 作為使用最廣泛的應(yīng)用程序框架之一，是目前下載量最大的用于執(zhí)行JavaScript代碼的跨平臺(tái)運(yùn)行環(huán)境之一，它使用了Chrome的JavaScript引擎構(gòu)建開源服務(wù)端平臺(tái)，使用 node.js 的網(wǎng)絡(luò)應(yīng)用數(shù)量已超過84,000 個(gè)。作為基于谷歌瀏覽器核心和node.js運(yùn)行的nw.js，使用一種新的方式，可以利用web前端開發(fā)技術(shù)完成網(wǎng)絡(luò)應(yīng)用本地化的開發(fā)，并完全支持node.js所有api及第三方模塊，并擁有訪問本地操作系統(tǒng)的能力，使得桌面應(yīng)用更加容易打包并運(yùn)行于各種不同的系統(tǒng)平臺(tái)，令桌面應(yīng)用的開發(fā)更加簡潔高效。

本文介紹了一款基于nw.js框架開發(fā)的音樂播放器桌面網(wǎng)絡(luò)應(yīng)用——潘多拉音樂盒播放器軟件，可以工作在Windows、Linux等系統(tǒng)環(huán)境中，播放器包括歡迎界面、播放音樂、管理歌單、在線搜索音樂、用戶登錄、換膚、應(yīng)用程序管理等模塊功能，實(shí)現(xiàn)音樂播放器常用基本功能及用戶個(gè)性化管理功能。

二、基于NW.js桌面網(wǎng)絡(luò)應(yīng)用開發(fā)運(yùn)行環(huán)境搭建

NW.js由github上的開源項(xiàng)目node-webkit更名而來，官方站點(diǎn)為https://github.com/nwjs/nw.js。本文以Windows操作系統(tǒng)環(huán)境為例，介紹NW.js環(huán)境搭建的方法。

進(jìn)入NW.js官方站點(diǎn)，根據(jù)操作系統(tǒng)下載安裝包，并解壓到磁盤。nw.js基本的程序結(jié)構(gòu)包括package.json配置文件，位于項(xiàng)目根目錄下，用于描述項(xiàng)目相關(guān)信息；應(yīng)用程序前端html/CSS/JavaScript前端代碼文件,其中，index.html為整個(gè)應(yīng)用程序的啟動(dòng)頁面；node_modules目錄存放Node.js模塊文件。

NW.js桌面應(yīng)用程序在啟動(dòng)時(shí)，首先要讀取配置文件package.json文件，對(duì)整個(gè)應(yīng)用程序進(jìn)行初始化，配置文件中參數(shù)的具體含義如下：

三、潘多拉音樂盒應(yīng)用程序系統(tǒng)功能模塊

該應(yīng)用是一款基于node-webkit開發(fā)的桌面應(yīng)用程序，包括歡迎界面、播放音樂、管理歌單、搜索在線音樂、用戶登陸、換膚、應(yīng)用程序管理等功能模塊。

播放器UI使用扁平化極簡風(fēng)，界面簡潔美觀清新，菜單功能布局合理，打開應(yīng)用時(shí)有動(dòng)態(tài)歡迎頁面，與用戶交互友好，用戶可根據(jù)個(gè)人喜歡更換界面主色調(diào)；用戶可以通過在線搜索的方式播放音樂，登陸的用戶可以查看播放歷史，收藏歌單，將喜歡的歌曲添加到自己的歌單；在歌單管理方面，用戶可以搜藏在線歌單，也可以自建歌單，添加自己喜歡的音樂；可通過排行榜獲取最新最熱們歌曲；系統(tǒng)還提供管理最小化、最大化及關(guān)閉等功能。應(yīng)用主要為用戶提供音樂播放平臺(tái)，獲取音頻資源，管理自己喜歡的音樂，豐富現(xiàn)代社會(huì)人們的精神生活，滿足人們對(duì)音樂文化的向往。應(yīng)用主要包括如下模塊，

整個(gè)應(yīng)用程序包括以下功能模塊，歡迎界面——在歡迎界面中展示播放器名稱，歡迎頁面每次登陸時(shí)隨機(jī)進(jìn)行更換；播放音樂——管理正在播放的音樂，具備播放/暫停、前一首、下一首、循環(huán)方式、音量調(diào)節(jié)、音質(zhì)選擇、播放進(jìn)度條等功能?？烧故静シ乓魳返膶］嫹饷?、歌詞等信息；管理歌單——提供收藏歌單功能，用戶也可以自己創(chuàng)建、編輯、刪除歌單，管理自己喜歡的音樂；搜索音樂——用戶可在線搜索音樂；用戶登陸——使用QQ或微信進(jìn)行第三方登陸，登陸可使用管理歌單、查看播放歷史等更多功能；換膚——用戶可根據(jù)個(gè)人愛好更換界面主題；應(yīng)用程序管理——提供最小化、最大化、關(guān)閉、窗口縮放、窗口拖拽等管理應(yīng)用程序的功能。

四、潘多拉音樂盒應(yīng)用程序?qū)崿F(xiàn)

通過定時(shí)器設(shè)定歡迎頁面展示時(shí)間，3s后進(jìn)入播放器主界面。在歡迎頁面中展示播放器名稱，背景采用動(dòng)態(tài)圖片的形式，并且每次打開應(yīng)用程序時(shí)會(huì)隨機(jī)變換背景圖。

播放器頁面由四部分組成，分別是頭部——包括播放器logo區(qū)域、排行榜功能區(qū)域、搜索框功能區(qū)、應(yīng)用程序管理功能區(qū)域；左側(cè)菜單欄——包括正在播放、播放歷史、我收藏的歌單及我的歌單；展示區(qū)域——選擇菜單欄標(biāo)題后，展示相應(yīng)內(nèi)容。例如，點(diǎn)擊“正在播放”，展示頁面展示正在播放歌曲的相關(guān)信息；底部播放功能區(qū)——包括播放/暫停、前一首、下一首、循環(huán)方式、音量調(diào)節(jié)、音質(zhì)選擇、播放進(jìn)度條等功能。在音樂播放的過程中，可以通過界面底部的管理播放功能按鈕控制音樂的播放，包括播放/暫停、前一首、下一首、循環(huán)方式（包括順序播放、單曲循環(huán)、循環(huán)播放、隨機(jī)播放）、音量調(diào)節(jié)、音質(zhì)選擇（可以打開或關(guān)閉高品質(zhì)音效）、播放進(jìn)度條（通過拖動(dòng)進(jìn)度條改變播放進(jìn)度）、歌曲總時(shí)間和當(dāng)前已播放時(shí)間等功能。點(diǎn)擊菜單中“正在播放”，在展示界面會(huì)出現(xiàn)當(dāng)前正在播放的音樂的相關(guān)信息，包括音樂專輯封面、歌手信息、歌詞等。

用戶登陸系統(tǒng)后，可以點(diǎn)擊左側(cè)菜單欄中的“我收藏的歌單”，查看收藏過的歌單，歌單顯示在展示區(qū)域的下半部分，每頁顯示6個(gè)收藏的歌單，在當(dāng)前顯示的歌單左右兩側(cè)分別有上一頁和下一頁按鈕來進(jìn)行翻頁。展示區(qū)的上半部分為輪播模塊，用來推送在線熱門歌單，選擇進(jìn)入相應(yīng)歌單后，顯示歌單具體內(nèi)容，并提供“開始播放歌單”“收藏/取消收藏按鈕”進(jìn)行歌單的收藏。

在搜索欄搜索要找的音樂，搜索結(jié)果將展示在展示界面中，若沒有完全匹配的內(nèi)容，將返回包含搜索關(guān)鍵字的內(nèi)容。用戶可通過QQ、微信等第三方方式登陸，游客只能使用搜過和播放歌曲功能，未登錄時(shí)的界面，點(diǎn)擊登陸登陸后的用戶可以管理歌單、查看播放歷史。點(diǎn)擊界面上方的換膚圖標(biāo)，可以根據(jù)個(gè)人喜好更換界面主色調(diào)，包括熱情紅、活力橙、浪漫紫、靜謐藍(lán)、清新綠及默認(rèn)顏色，鼠標(biāo)點(diǎn)擊相應(yīng)的顏色主界面即自動(dòng)更換主題顏色。界面右上側(cè)提供了用來管理應(yīng)用程序的按鈕，包括最小化、最大化即關(guān)閉按鈕，點(diǎn)擊最小化按鈕可將窗口縮小至桌面任務(wù)欄，點(diǎn)擊最大化可將窗口放大至適應(yīng)整個(gè)桌面大小，點(diǎn)擊關(guān)閉按鈕退出播放器應(yīng)用程序。

該應(yīng)用程序還提供了窗口拖拽功能即窗口縮放功能，通過配置應(yīng)用程序json配置文件來實(shí)現(xiàn)。

結(jié)束語

node-webkit作為開源項(xiàng)目，目前已成為最流行的前端開發(fā)框架之一，開發(fā)效率高、本地調(diào)用良好，為前端開發(fā)軟件工程師提供了一個(gè)非常好的開發(fā)桌面應(yīng)用程序的方式，越來越多的項(xiàng)目選擇node-webkit架構(gòu)。但師目前也暴露出許多問題，如閃退、卡死、圖片加載失敗等，還需要社區(qū)加大維護(hù)，使得整個(gè)node-webkit架構(gòu)更加健壯。相信未來NW.js會(huì)在大前端領(lǐng)域有更廣泛的應(yīng)用。