初识Node-Webkit之桌面应用程序开发

初识Node-Webkit之桌面应用程序开发

近期开发一个桌面客户端类型的项目,调研阶段接触到了NW.js,原名node-webkit,融合了 Node.js 和 Webkit HTML 渲染器来运行本地应用,是一个Chromium和node.js的结合体。本篇通过一个案例,简单熟悉一下NW.js,并总结其优缺点。

NW.js

NW.js官网(http://nwjs.io/)下载node-webkit包, 选择与平台相对应的版本,下载并安装即可。以windows版本为例,解压后目录结构如下:

node-webkit

Hello World

初始化项目

在任一目录下,新建index.html和package.json文件:

NW.js项目

package.json为NW项目的配置入口:


{ "title": "Hello World", "name": "app", "main": "index.html", //项目入口窗口所在文件 "window": { "toolbar": false, //工具条 "frame": false, //边框,与transparent联合使用,控制窗口边框显示 "transparent": true } }

更多信息可参见文档

打包

新建zip压缩包,包名自定义,建议与package.json文件中name属性保持一致,本文以app.zip为例,然后将以上index.html和package.json文件放入,如下:

NW.js项目

注:项目文件必须在压缩包根目录下,即通过鼠标右键新建ZIP压缩文件生成压缩包,然后将文件移入压缩包。

随后将该app.zip包修改后缀为.nw,即:

app.nw

将该nw包拖放到解压后的nw环境包中的nw.exe,即启动运行,:

Hello World案例运行

生成exe文件

如上已经生成一个可运行的项目文件,但是否感觉运行比较麻烦?接下来我们可以进一步生成.exe文件,就像普通exe文件一样点击即可运行。

NW项目生成exe文件

进入对应目录,执行copy /b app.nw+nw.exe app.exe命令,即生成可执行app.exe文件,双击即可运行,运行结果与上文一样。

优缺点思考

  • 优点

    • 提高UI开发效率与视觉效果,使用HTML5和CSS3可以极大提高UI开发效率并提升传统桌面客户端视觉效果
    • 容易实现跨平台:Windows、Linux、Mac OS X
    • 方便开发人员调试
  • 缺点

    • 程序体积变大,就如上文的一个简单地示例程序,都大于20M
    • 使用Js使用API操作客户端,安全性需要保证

对node-webkit的初步认识就到这里,其他使用web技术开发桌面程序的还有Electron、hex等,若感兴趣可以学习一下,希望能有所得。

原创文章,转载请注明: 转载自 熊建刚的博客

本文链接地址: 初识Node-Webkit之桌面应用程序开发

熊 建刚

热爱前端,但不局限于前端,喜欢尝试各种新技术,爱好读书。

3 thoughts on “初识Node-Webkit之桌面应用程序开发

发表评论

电子邮件地址不会被公开。 必填项已用*标注