基于node-webkit的網絡應用

安寧

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

關鍵詞：node-webkit;網絡應用;桌面應用;音樂播放器;web開發

一、引言

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

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

二、基于NW.js桌面網絡應用開發運行環境搭建

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

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

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

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

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

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

“nodejs”： true，

“window”： {

“title”： “demo”， //任務欄顯示的標題

“icon”： “link.png”， //窗口圖標

“toolbar”： false， //是否顯示導航欄

“resizable”： true，//是否可以調整窗口大小

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

“frame”： true， //是否顯示應用程序邊框

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

“position”： “center”，

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

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

“show_in_taskbar”：true，//是否顯示任務欄圖標 }

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

三、潘多拉音樂盒應用程序系統功能模塊

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

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

整個應用程序包括以下功能模塊，歡迎界面——在歡迎界面中展示播放器名稱，歡迎頁面每次登陸時隨機進行更換;播放音樂——管理正在播放的音樂，具備播放/暫停、前一首、下一首、循環方式、音量調節、音質選擇、播放進度條等功能。可展示播放音樂的專輯封面、歌詞等信息;管理歌單——提供收藏歌單功能，用戶也可以自己創建、編輯、刪除歌單，管理自己喜歡的音樂;搜索音樂——用戶可在線搜索音樂;用戶登陸——使用QQ或微信進行第三方登陸，登陸可使用管理歌單、查看播放歷史等更多功能;換膚——用戶可根據個人愛好更換界面主題;應用程序管理——提供最小化、最大化、關閉、窗口縮放、窗口拖拽等管理應用程序的功能。

四、潘多拉音樂盒應用程序實現

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

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

<div id=”banner” style=”display：none”><div class=”slider fl” id=”slider”> <div class=”slider-img”><a href=”#” slider-title=”孤獨患者散步時聽的百首日系民謠”><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=”成為學霸的第一步就是找對學習BGM”><img src=”images/cont/slider_img3.png” alt=”#”></a>&lt;a href=”#” slider-title=”過耳不完！聽一遍就能學會的國語響指”><img src=”images/cont/slider_img4.png” alt=”#”></a></div><div class=”slider-title”><p>孤獨患者散步時聽的百首日系民謠</p></div><div class=”slider-btn”><span class=”cur”></span></div></div>

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

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

該應用程序還提供了窗口拖拽功能即窗口縮放功能，通過配置應用程序json配置文件來實現。

五、結束語

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

參考文獻：

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