安寧

摘要：node-webkit即NW.js，封裝了webkit的內(nèi)核和node.js，可用nodejs將網(wǎng)絡(luò)應(yīng)用本地化，用webkit來解析和執(zhí)行html和JavaScript程序，與傳統(tǒng)桌面應(yīng)用相比，基于node-webkit開發(fā)的桌面應(yīng)用不僅可以跨平臺，并且可以使用html5、css3、JavaScript開發(fā)桌面應(yīng)用，更加簡潔高效。本文介紹了一種基于node-webkit的音樂播放器桌面應(yīng)用，可以應(yīng)用在windows、linux等系統(tǒng)環(huán)境中，UI界面采用極簡風(fēng)格，美觀清新，包括歡迎界面、播放音樂、管理歌單、搜索在線音樂、用戶登錄、換膚、應(yīng)用程序管理等模塊功能，實現(xiàn)音樂播放器常用功能及用戶個性化管理。

關(guān)鍵詞：node-webkit;網(wǎng)絡(luò)應(yīng)用;桌面應(yīng)用;音樂播放器;web開發(fā)

一、引言

近年來，前端技術(shù)發(fā)展迅速，HTML、CSS、JavaScript等都有質(zhì)的飛躍。隨著web技術(shù)的發(fā)展，大前端的概念也不斷被拋出，網(wǎng)絡(luò)應(yīng)用的開發(fā)面向更多終端、更多平臺、更多領(lǐng)域。html5具有更高的兼容性，支持多媒體，加入了更多豐富的功能如表單驗證、拖拽等;CSS3具有了編程能力，JavaScript方面也出現(xiàn)了更多的框架結(jié)構(gòu)，例如gulp、less、node.js、react、vue.js、d3.js等。其中，Node.js 作為使用最廣泛的應(yīng)用程序框架之一，是目前下載量最大的用于執(zhí)行JavaScript代碼的跨平臺運(yùn)行環(huán)境之一，它使用了Chrome的JavaScript引擎構(gòu)建開源服務(wù)端平臺，使用 node.js 的網(wǎng)絡(luò)應(yīng)用數(shù)量已超過 84，000 個。作為基于谷歌瀏覽器核心和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)平臺，令桌面應(yīng)用的開發(fā)更加簡潔高效。

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

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

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

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

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

{? ?“main”： “index.html”， //指定程序的起始頁面

“name”： “demo”， //項目名稱

//此參數(shù)為一個布爾值，true表示開啟webkit的node支持，反之表示禁用webkit的node支持

“nodejs”： true，

“window”： {

“title”： “demo”， //任務(wù)欄顯示的標(biāo)題

“icon”： “l(fā)ink.png”， //窗口圖標(biāo)

“toolbar”： false， //是否顯示導(dǎo)航欄

“resizable”： true，//是否可以調(diào)整窗口大小

“fullscreen”： false， //是否全屏

“frame”： true， //是否顯示應(yīng)用程序邊框

//窗口打開時的位置，有效值為“null”、“center”或者“mouse”

“position”： “center”，

“width”： 800， //窗口寬度

“height”： 670， //窗口高度

“show_in_taskbar”：true，//是否顯示任務(wù)欄圖標(biāo) }

“webkit”： {“plugin”： true //開啟插件}}

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

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

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

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

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

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

播放器頁面由四部分組成，分別是頭部——包括播放器logo區(qū)域、排行榜功能區(qū)域、搜索框功能區(qū)、應(yīng)用程序管理功能區(qū)域;左側(cè)菜單欄——包括正在播放、播放歷史、我收藏的歌單及我的歌單;展示區(qū)域——選擇菜單欄標(biāo)題后，展示相應(yīng)內(nèi)容。例如，點擊“正在播放”，展示頁面展示正在播放歌曲的相關(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)度條（通過拖動進(jìn)度條改變播放進(jìn)度）、歌曲總時間和當(dāng)前已播放時間等功能。點擊菜單中“正在播放”，在展示界面會出現(xiàn)當(dāng)前正在播放的音樂的相關(guān)信息，包括音樂專輯封面、歌手信息、歌詞等。播放功能部分代碼如下：

<div id=”banner” style=”display：none”><div class=”slider fl” id=”slider”> <div class=”slider-img”><a href=”#” slider-title=”孤獨(dú)患者散步時聽的百首日系民謠”><img src=”images/cont/slider_img1.png” alt=”#”></a><a href=”#” slider-title=”Chillwave|寒潮席卷，如夢須臾”><img src=”images/cont/slider_img2.png” alt=”#”></a><a href=”#” slider-title=”成為學(xué)霸的第一步就是找對學(xué)習(xí)BGM”><img src=”images/cont/slider_img3.png” alt=”#”></a>&lt;a href=”#” slider-title=”過耳不完！聽一遍就能學(xué)會的國語響指”><img src=”images/cont/slider_img4.png” alt=”#”></a></div><div class=”slider-title”><p>孤獨(dú)患者散步時聽的百首日系民謠</p></div><div class=”slider-btn”><span class=”cur”></span></div></div>

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

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

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

五、結(jié)束語

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

參考文獻(xiàn)：

[1]樸靈.深入淺出Node.js， 2013，9787115335500