Nw.js入门文档

图片太多，带图片的文档可以去我的csdn下载找到，或者有道云：http://note.youdao.com/noteshare?id=fd450e1a5ebd05e395ca02e18ab6a648&sub=05FDFAF28F9D46F9A2223810617F19FC

目录

技术介绍 4
技术介绍 4
1 开发环境搭建及开发工具 5
1.1开发环境搭建 5
1.2 开发工具介绍 7
2 项目结构及配置文件 8
2.1 项目目录结构 8
2.2 配置文件 9
3 生成exe及跨平台打包 14
3.1 Hello Word 14
3.2 生成exe文件 15
3.3 跨平台打包 17
4 常用功能 19
4.1 自定义窗口 19
4.2 窗口相关功能 19
4.3 快捷键 21
4.4 开机自启动 22
4.5 配置菜单项 23

技术介绍

技术介绍
（1）NW.JS简介

NW.js （原名 node-webkit）是一个结合了 Chromium 和 node.js 的应用。主要用于跨平台轻量级桌面应用开发，运行环境包括32位和64位的Window、Linux和Mac OS。运行时，通过它可以用 HTML 和 JavaScript 编写原生应用程序。它还允许开发者从 DOM 调用 Node.js 的模块，实现了一个用所有 Web 技术来写原生应用程序的新的开发模式，而且，开发者可以很容易的将一个web应用打包成原生应用。

（2）NW.JS的优缺点

NW.js的优点：
– 以网络最流行的技术编写原生应用程序的新方法
– 基于HTML5, CSS3, JS 而编写
– 完全支持nodejs所有api及第三方模块
– 良好的性能：node和webkit运行在相同的线程，对象在同一堆可以相互调用
– 容易打包和分发
– 支持运行环境包括32位和64位的Window、Linux和Mac OS

NW.js的缺点：
– 因为nwjs基于chromium，所以初始内存占用率较高

1 开发环境搭建及开发工具

1.1开发环境搭建

1、Node.js

到Node.js官网下载Node.js安装包并安装

安装之后可在cmd中使用 node -v 检测是否安装成功

2、NW.js

到NW.js官网下载，有两个版本，一个是Normal版本，一个是SDK版本，如果是做开发测试，则建议选择下载SDK版本，SDK版本可以使用开发工具进行debug等。

下载完成之后，解压至本地目录

1.2 开发工具介绍

1、Enigma Virtual Box

Enigma Virtual Box是软件虚拟化工具，它可以将多个文件封装到应用程序主文件，从而制作成为单执行文件的绿色软件。它支持所有类型的文件格式，虚拟化后的软件不释放任何临时文件到您的硬盘，文件模拟过程仅在内存运行。

到官网下载Enigma Virtual Box安装包并安装（注意下载第三个）

2、webstorm或vscode等

2 项目结构及配置文件

2.1项目目录结构

locales文件夹是区域语言设置
d3dcompiler_47.dll是软件和游戏运行的重要动态链接库
ffmpeg.dll是谷歌浏览器核心引擎升级后用来支持视频和音频播放的动态链接库
icudtl.dat是一个存储基本数据信息的文件
libEGL.dll是实现webGL必须用到的动态链接库
libGLESv2.dll是实现GPU必须用到的动态链接库
nw.exe主要应用
nw.pak顾名思义，核心数据的压缩包
nwjc.exe用于打包时项目加密使用

我们需要自己创建一个新的文件夹 helloworld作为项目代码根目录，在根目录下有package.json（程序的配置文件）和index.html（可以是任意名称，应用的启动页面）；assest存放应用的样式、脚本、和资源文件（html、图片等）；node_modules存放node.js的扩展组件。这只是一个通用的基本组织结构，实际项目的组织结构，不必一定按照此结构进行搭建，如项目使用的是js模块化编程require框架的。最终的组织结构以适应实际项目为准，但文件package.json和index.html必须放在根目录下。

2.2 配置文件
nw在启动应用程序时，首先要读取package.json文件，初始化基本属性，下面我们看看package.json的完整参数。每个参数配置都标有注释。

{
    /**指定程序的起始页面。*/
    "main": "index.html",
    /**字符串必须是小写字母或者数字，可以包含.或者_或者-不允许带空格。name必须全局唯一。*/
    "name": "demo",
    /**程序描述*/
    "description": "demo app of node-webkit",
    /**程序版本号*/
    "version": "0.1.0",
    /**关键字*/
    "keywords": ["demo","node-webkit"],
    /**bool值，如果设置为false，将禁用webkit的node支持。*/
    "nodejs": true,
    /**
    * 指定一个node.js文件，当程序启动时，该文件会被运行，启动时间要早于node-webkit加载html的时间。
    * 它在node上下文中运行，可以用它来实现类似后台线程的功能。
    * （不需要可注释不用）
    */
    //"node-main": "js/node.js",
    /**
    * bool值。默认情况下，如果将node-webkit程序打包发布，那么只能启动一个该应用的实例。
    * 如果你希望允许同时启动多个实例，将该值设置为false。
    */
    "single-instance": true,
    /**窗口属性设置 */
    "window": {
        /**字符串，设置默认title。*/
        "title": "demo",
        /**窗口的icon。*/
        "icon": "link.png",
        /**bool值。是否显示导航栏。*/
        "toolbar": false,
        /**bool值。是否允许调整窗口大小。*/
        "resizable": true,
        /**是否全屏*/
        "fullscreen": false,
        /**是否在win任务栏显示图标*/
        "show_in_taskbar": true,
        /**bool值。如果设置为false，程序将无边框显示。*/
        "frame": true,
        /**字符串。窗口打开时的位置，可以设置为“null”、“center”或者“mouse”。*/
        "position": "center",
        /**主窗口的的宽度。*/
        "width": 800,
        /**主窗口的的高度。*/
        "height": 670,
        /**窗口的最小宽度。*/
        "min_width": 400,
        /**窗口的最小高度。*/
        "min_height": 335,
        /**窗口显示的最大宽度，可不设。*/
        "max_width": 800,
        /**窗口显示的最大高度，可不设。*/
        "max_height": 670,
        /**bool值，如果设置为false，启动时窗口不可见。*/
        "show": true,
        /**是否在任务栏显示图标。*/
        "show_in_taskbar":true,
        /**
         * bool值。是否使用kiosk模式。如果使用kiosk模式，
         * 应用程序将全屏显示，并且阻止用户离开应用。
         * */
        "kiosk": false
    },
    /**webkit设置*/
    "webkit": {
        /**bool值，是否加载插件，如flash，默认值为false。*/
        "plugin": true,
        /**bool值，是否加载Java applets，默认为false。*/
        "java": false,
        /**bool值，是否启用页面缓存，默认为false。*/
        "page-cache": false
    }
}```
在上面的配置中，main和name是必须的属性。
下面主要讲讲几个比较难理解的参数配置。
（1）"node-main"配置：指定一个js文件，该js文件是启动程序时最早运行文件，在node-main脚本中还可以访问全局的“window”对象，它指向DOM窗口，但是如果页面导航发生变化，访问到的window对象也会发生变化。因为它执行时间要早于DOM加载，所以要等页面加载完毕，才能使用“window”对象。同时，在DOM页面中，可以通过process.mainModule来获取node-main信息。
（2）"single-instance"配置：简单地说，是指是否允许同时打开多个nw应用。
（3）"kiosk"配置：如果该配置设为ture，则显示为全屏模式并屏蔽关闭按钮，即该显示器将会一直停留在nw应用的显示界面，类似于银行的排队等待办理业务的取票机界面。
 
 
还有一些不经常使用的参数如下：
user-agent
应用发起http请求时，使用的user-agent头信息。下列占位符可以被替换：
%name: 替换配置中的name属性
%ver: 替换配置中的version属性
%nwver: 被node-webkit版本信息替换.
 %webkit_ver: 被WebKit 引擎的版本信息替换.
%osinfo: 被 操作系统和 CPU 信息 替换，在浏览器的 user agent 字符串中可以被看到.
示例配置：

{
“user-agent”: “测试 %ver %nwver %webkit_ver windows7” /* 替换占位符内容即可 */
}

js-flags
string类型，传递给js引擎（V8）的参数。例如，想启用Harmony Proxies和 Collections功能，可以使用如下配置方式：

{
“js-flags”: “–harmony_proxies --harmony_collections”
}

inject-js-start / inject-js-end
string 类型。指定一个js文件。
对于inject-js-start，该js文件会在所有css文件加载完毕，dom初始化之前执行。
对于inject-js-end，该js文件会在页面加载完毕，onload事件触发之前执行。
snapshot
string类型，应用程序的快照文件路径。包含编译的js代码。使用快照文件可以有效的保护js代码。后续文章会详细介绍。

dom_storage_quota
int类型，dom 存储的限额（以自己为单位）。建议限制为你预想大小的2倍。
no-edit-menu
bool值，Edit菜单是否显示。仅在Mac系统下有效。
maintainers
软件维护者信息，是一个数组，每个维护人的信息中，name字段是必须字段，其他两个（email和web）是可选字段。示例如下：

{
“maintainers”:[{
“name”: “Bill Bloggs”,
“email”: “billblogs@bblogmedia.com”,
“web”: “http://www.bblogmedia.com”,
}]
}

contributors
贡献者信息，格式同maintainers，按照约定，第一个contributor是该应用的作者。
bugs
提交bug的url。可以是“mailto：”或者“http://”格式。
licenses
一个数组，可以包含多个声明。每个声明包含“type”和“url”两个属性，分别指定声明的类型和文本。示例如下：

{
“licenses”: [{
“type”: “GPLv2”,
“url”: “http://www.example.com/licenses/gpl.html”,
}]
}

3    生成exe及跨平台打包
 
3.1 Hello World
在index.html写入最简单的Hello World！

Hello World!

``` 在package.json 写入最简单的配置 `{ "name": "helloworld", "version": "0.0.1", "main": "index.html" }``` 在cmd中进入到项目目录（注意是nw项目目录，不是helloworld目录） 然后执行 nw helloworld命令，就可以运行了。 注：有的可能会提示报错，如下图。

具体原因不明，可能是因为cmd的原因，因为上图是Windows PoweShell，并不是原机的cmd。

解决办法如下：
将 nw 命令替换为 .\nw 。
即 .\nw helloword

运行成功效果如下：

3.2 生成exe文件
1、压缩helloworld文件夹中的所有文件，保存为ZIP格式，
并将此文件更名为 helloworld.nw

2、将helloworld.nw从helloworld文件夹中复制出来，保证helloworld.nw和nw.exe在同一目录下。

3、在此目录下执行

copy / b nw.exe + helloworld.nw helloworld.exe

然后发现目录下多了 helloworld.exe 双击即可运行。

但将他换到其它目录就不可以执行了，因为换到其它目录找不到nwjs包内的依赖文件，所以需要跨平台打包。

3.3 跨平台打包
打开 Enigma Virtual Box ，然后在 Enter Input File Name 处选择上一步生成的 helloworld.exe 文件，Enter Output Name 可以默认；
之后再点击下面的 Add 按钮，将 nwjs 文件夹（名称不一定是 nwjs ，就是最开始第一步 NW.js 环境的那个文件夹）下除 nw.exe 和 helloworld.nw 以及 helloworld.exe 之外的所有文件加载上（注意包括文件夹，按如下方法添加），然后点击 Process ，等待执行成功即可，这时候会在相应的路径下生成一个新的 .exe 文件（我们暂且叫做 helloworld_boxed.exe），此时的 helloworld_boxed.exe 文件即可在任意的 Windows 环境下运行了。

4 常用功能

4.1 自定义窗口
由于原程序的窗口边框很古老，我们想要个性化的窗口边框，如下图：

1、 创首先要在package.json中配置frame为false，表示隐藏默认的窗口

2、 然后我们可以在html中自己编写一个header充当边框（此处不贴代码了）

3、然后配置各按钮的功能，比如窗口最大化、最小化、关闭等（详见4.2）

4.2 窗口相关功能

1、全屏和取消全屏
和全屏有关的三个api：
Window.enterFullscreen()
该api使整个窗口进入全屏状态。

Window.leaveFullscreen()
使窗口退出全屏状态。

Window.toggleFullscreen()
逆转窗口的全屏状态。

示例：
新建fullscreenhtml文件。

fullscreen.html 内容如下：

<html>
<head>
<title>测试node-webkit 全屏api</title>
<meta charset="utf-8" />
</head>
<body >
<button id="full"> 全屏</button>
<button id="exitFull">退出全屏</button>
<div>
</div>
<script>
var gui = require('nw.gui');
var win = gui.Window.get();
var fullBt = document.querySelector('#full');
fullBt.addEventListener("click", function (evt) {
win.enterFullscreen();
}, false);
var exitBt = document.querySelector('#exitFull');
exitBt.addEventListener("click", function (evt) {
win.leaveFullscreen();
}, false);
</script>
</body>
</html>

代码很简单，分别绑定了两个button的事件，用来全屏和退出全屏

2、创建托盘图标

<script>
var isShowWindow = true;
// Load native UI library
var gui = require('nw.gui');
var win = gui.Window.get();
var tray = new gui.Tray({
title: '测试软件',
icon: '2655716405282662783.png' 
});
tray.tooltip = '点此打开';
//添加一个菜单
var menu = new gui.Menu();
menu.append(new gui.MenuItem({ type: 'checkbox', label: '选择我' }));
tray.menu = menu;
//click事件
tray.on('click', function() {
if(isShowWindow){
win.hide();
isShowWindow = false;
}else{
win.show();
isShowWindow = true;
}
});
</script>

3、 窗口最大化、最小化、关闭

$(".minimize-win").click(function () {//窗口最小化到托盘
win.hide();
});
$(".min-bottom-taskbar").click(function () {//最小化到底部任务栏
win.minimize();
});
$(".maximize-win").click(function () {//窗口最大化
win.maximize();
});
$(".close-win").click(function () {//窗口关闭
win.close();
});

4.3 快捷键

<script>
var gui = require('nw.gui');
var option = {
key : "Ctrl+Shift+A",
active : function() {
console.log("Global desktop keyboard shortcut: " + this.key + " active.");
},
failed : function(msg) {
// :(, fail to register the |key| or couldn't parse the |key|.
console.log(msg);
}
};
var shortcut = new gui.Shortcut(option);
gui.App.registerGlobalHotKey(shortcut);
</script>

4.4 开机自启动
开机自启动使用到 startOnBoot.js
startOnBoot.js 代码如下：

let WinReg = require('winreg');
let startOnBoot = {
enableAutoStart: function (name, file, callback) {
let key = getKey();
key.set(name, WinReg.REG_SZ, file, callback || noop);
},
disableAutoStart: function (name, callback) {
let key = getKey();
key.remove(name, callback || noop);
},
getAutoStartValue: function (name, callback) {
let key = getKey();
key.get(name, function (error, result) {
if (result) {
callback(result.value);
} else {
callback(null, error);
}
});
}
};
let RUN_LOCATION = '\\Software\\Microsoft\\Windows\\CurrentVersion\\Run';
 
function getKey() {
return new WinReg({
hive: WinReg.HKCU, //CurrentUser,
key: RUN_LOCATION
});
}
function noop() {}
module.exports = startOnBoot;

使用时如下（因为开机自启动一次后就失效，所以我选择使用localstorage存储状态）：

<script>
let startOnBoot = require('./assest/js/startOnBoot.js');
$(".self-starting").click(function () {//点击开机自启动
if (window.localStorage.selfStart) {
if (window.localStorage.selfStart === "1") {
startOnBoot.disableAutoStart('<写入注册表的key>');
window.localStorage.selfStart = "0";
} else {
startOnBoot.enableAutoStart('<写入注册表的key>',   process.execPath);
window.localStorage.selfStart = "1";
}
} else {
window.localStorage.setItem('selfStart',"1");
startOnBoot.enableAutoStart('<写入注册表的key>', process.execPath);
}
});
</script>

4.5 配置菜单项
创建menuDemo.html
menuDemo.html代码如下：

<html>
<head>
<title>menuDemo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body >
<h1>menu api 测试</h1>
<script>
// Load native UI library
var gui = require('nw.gui');
var win = gui.Window.get();
//创建window menu
var windowMenu = new gui.Menu({ type: 'menubar' });
var windowSubmenu = new gui.Menu();
var subMenuItem = new gui.MenuItem({ label: '子菜单项' });
windowSubmenu.append(subMenuItem);
windowMenu.append(
new gui.MenuItem({ label: '子菜单', submenu: windowSubmenu })
);
win.menu = windowMenu;
// Create an empty menu
var menu = new gui.Menu();
// Add some items
menu.append(new gui.MenuItem({ label: 'Item A' }));
menu.append(new gui.MenuItem({ label: 'Item B' }));
menu.append(new gui.MenuItem({ type: 'separator' }));
menu.append(new gui.MenuItem({ label: 'Item C' }));
// Remove one item
menu.removeAt(1);
// Popup as context menu
menu.popup(10, 10);
// Iterate menu's items
for (var i = 0; i < menu.items.length; ++i) {
var element = document.createElement('div');
element.appendChild(document.createTextNode(menu.items[i].label));
document.body.appendChild(element);
}
</script>
</body>
</html>

最后展示个小Demo界面

---

觉得有帮助的小伙伴右上角点个赞~

扫描上方二维码关注我的订阅号~