安宁

摘要：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