node-webkit:用JS开发跨平台的桌面应用

川长思鸟来 2022-08-27 14:39 259阅读 0赞

## node-webkit是一个基于chromium和node.js实现的应用程序运行时环境，开发人员可运行通过HTML(5)、CSS(3)、Javascript来编写的本地应用程序。 ##

项目地址： [https://github.com/rogerwang/node-webkit][https_github.com_rogerwang_node-webkit]

文档： [https://github.com/rogerwang/node-webkit/wiki][https_github.com_rogerwang_node-webkit_wiki]

开源协议：MIT

**特点：**

使用web技术开发，html5、css3、js、webGL。

在网页中使用node.js。

跨平台运行，兼容linux、mac、windows。

**安装node-webkit(这里以mac os为例)**

1.去github下载mac版的node-webkit  [https://github.com/rogerwang/node-webkit][https_github.com_rogerwang_node-webkit]

2.解压之后修改 ~/.bash\_profile ，设置node-webkit执行程序的别名为nw(本人解压在/usr目录)。

alias nw="/usr/node-webkit-v0.7.5/node-webkit.app/Contents/MacOS/node-webkit"

3.使别名立即生效

source ~/.bash\_profile

4. 在控制台输入nw测试是否安装成功。

**使用node-webkit进行开发**

一个基本的node-webkit项目一般由3部分组成：主窗口文件index.html、配置文件package.json、其他一些资源及类库。

![154529762314325025.png][]  
1. 新建一个项目文件夹test1/

2. 创建主窗口文件test1/index.html

>           
> 
> <!DOCTYPE html>  
> <html >  
> <head>  
>     <meta charset="utf-8">  
>     <title>Hello world</title>  
> </head>  
> <body>  
>     <h1>hello node.js</h1>  
> </body>  
> </html>

3. 创建test1/package.json

>  \{  
>      "main" : "index.html",  
>       "name" : "test",  
>       "window" : \{  
>             "toolbar" : false  
>        \}  
> 
> 
> \}

4.  在控制台执行 nw test1 就能运行该应用程序。

![6597539258123395727.png][]  
**打包应用程序**

目前我们运行一个应用程序需要通过命令行来执行。

但在实际环境中我们需要将应用打包成.app(mac)或.exe(windows)文件以方便用户的使用。

mac电脑上打包很简单，只需要将我们的项目压缩成xx.nw 。在将xx.nw复制到node-webkit.app/Contents/Resources目录下。node-webkit.app就是你的应用程序了，然后改名字如 hello.app 。

**其他：**

包括windows下如何打包、如何修改图标、如何使用node.js的模块等请看官方文档，这里就不多说了。

**最后，让我们用node-webkit开发一款mac版的超级马里奥游戏。**

(好吧~我承认我吹牛逼的~~)

在github下载马里奥的源码 [https://github.com/Diogenesthecynic/FullScreenMario][https_github.com_Diogenesthecynic_FullScreenMario]

打包一下，完成。

[https_github.com_rogerwang_node-webkit]: https://github.com/rogerwang/node-webkit
[https_github.com_rogerwang_node-webkit_wiki]: https://github.com/rogerwang/node-webkit/wiki
[154529762314325025.png]: http://imglf0.ph.126.net/wvm9v4WtFHRAjbU0G8mGsg==/154529762314325025.png
[6597539258123395727.png]: http://imglf2.ph.126.net/gfoHSfuk5JRHJ1dMOOaLqQ==/6597539258123395727.png
[https_github.com_Diogenesthecynic_FullScreenMario]: https://github.com/Diogenesthecynic/FullScreenMario