nwjs 怎么使用nodejs

nwjs 怎么使用nodejs

NW.js 的 Hello World 程序，这里包含了外部 js 和 css 文件，仍是以 Mac OS X 平台为例，其他平台类似。
1. 前提条件 ，安装 NW.js

$ npm install nw -g

nw 模块就安装在 /usr/local/lib/node_modules/nw 目录下了，以后可以直接用 nw 命令来测试程序。

/usr/local/lib/node_modules/nw/nwjs/nwjs.app 是一个可用来打包应用的壳，与 Atom Shell 基本一至。

2. 建立文件, 目录

nwjs-app/

├── app.js

├── index.html

├── package.json

└── style.css

这里是一个简单的应用，实际 js 或 css 文件较多，或用到第三方的 js 或 css，需要更好的组织目录，如 js 文件放在 script 子目录中，把 css 文件放在 style 子目录中。

package.json 内容：
{
"main": "index.html",
"name": "Hello NW.js",
"window": {
// "toolbar": false //这个选项对于开发太重要了
}
}

index.html 内容：









Hello NW.js



要说 Hello World 程序 ，上面两个文件就足够了，这里再加点料，像 Web 开发一样的引入 js 和 css 文件。下面的两个文件，app.js 和 style.css 可以说明它们确实在发挥着光和热。

app.js 内容：
console.log('console app.js');
document.writeln("out put from app.js");

style.css 内容：
body {
background-color: lightgray;
}

3. 运行程序

命令行下进到项目所在的项目，直接执行 nw

nwjs-app $ nw

或者为 nw 指定应用目录，如

$ nw nwjs-app

本文原始链接 http://unmi.cc/nodejs-nw-js-gui-app-hello-world/ , 来自隔叶黄莺 Unmi Blog

因为在 package.json 中注释掉了 toolbar: false 默认为 true, 所以界面如下

toolbar 提供了前进，后退，刷新页面，还能修改地址，以及地址栏后的两个开发工具按钮。

上面的显示效果告诉了我们各个部件工作都很正常如预期。点击上面那个齿轮，打开 Developer Tool

对于 Web 开发人员，上面那个界面太熟悉了，有了这个再也不用担心界面的调节了，控制台的输出还捕获在这里的 Console，还能断点调试 JavaScript 代码，总之就等于一个 FireBug 摆在了你的面前。

4. 打包应用程序

如果是自己的工具，上面的步骤已经足够了，要是别的机器上安装了 NodeJS 和 NW.js，拷贝工程目录也可以的。

与 Atom Shell 基本是一样的，以 /usr/local/lib/node_modules/nw/nwjs/nwjs.app 为壳 -- 可以在 nwjs.io 上下载，把项目打包成 app.nw 放到前面那个壳的 Contents/Resources 目录中。

操作步骤

1) 拷贝出 nwjs.app 并重命名为 hello-nwjs.app

$ cp -R /usr/local/lib/node_modules/nw/nwjs/nwjs.app ./hello-nwjs.app

2) 打包项目文件到上面的 hello-nwjs.app/Contents/Resources 中

在项目目录下：

nwjs-app$ zip -r ../hello-nwjs.app/Contents/Resources/app.nw *

这时候就可以双击 hello-nwjs.app 来执行了，或者 open hell-nwjs.app 命令打开

已以把上面 package.json 中的 toolbar 改为 false 了，现在的 hello-nwjs.app 可是个实实在在的桌面应用程序了。

通过修改 hello-nwjs.app 中的配置文件，图标等来进一步定制应用程序。

同样，NodeJS 项目用 Grunt 来管理是再适合不过的，有一个 Grunt 插件 grunt-node-webkit-builder 就是干这个的，只是它还没来得急变成 grunt-nw-builder。

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息