基于node-webkit的網(wǎng)絡(luò)應(yīng)用

安寧

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

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

一、引言

近年來(lái)，前端技術(shù)發(fā)展迅速，HTML、CSS、JavaScript等都有質(zhì)的飛躍。隨著web技術(shù)的發(fā)展，大前端的概念也不斷被拋出，網(wǎng)絡(luò)應(yīng)用的開(kāi)發(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)建開(kāi)源服務(wù)端平臺(tái)，使用 node.js 的網(wǎng)絡(luò)應(yīng)用數(shù)量已超過(guò) 84，000 個(gè)。作為基于谷歌瀏覽器核心和node.js運(yùn)行的nw.js，使用一種新的方式，可以利用web前端開(kāi)發(fā)技術(shù)完成網(wǎng)絡(luò)應(yīng)用本地化的開(kāi)發(fā)，并完全支持node.js所有api及第三方模塊，并擁有訪問(wèn)本地操作系統(tǒng)的能力，使得桌面應(yīng)用更加容易打包并運(yùn)行于各種不同的系統(tǒng)平臺(tái)，令桌面應(yīng)用的開(kāi)發(fā)更加簡(jiǎn)潔高效。

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

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

NW.js由github上的開(kāi)源項(xiàng)目node-webkit更名而來(lái)，官方站點(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)頁(yè)面;node_modules目錄存放Node.js模塊文件。

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

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

“name”： “demo”， //項(xiàng)目名稱

//此參數(shù)為一個(gè)布爾值，true表示開(kāi)啟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)用程序邊框

//窗口打開(kāi)時(shí)的位置，有效值為“null”、“center”或者“mouse”

“position”： “center”，

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

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

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

“webkit”： {“plugin”： true //開(kāi)啟插件}}

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

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

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

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

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

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

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

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

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

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

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

五、結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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