基于node-webkit的網(wǎng)絡應用

安寧

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

一、引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)束語

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