nwjs打包

前端导航项目基于nodejs+vue开发，使用electron打包成exe进行安装到大屏运行，在模拟导航过程中会感觉到有稍微卡顿现象。

改成nwjs打包成exe，运行过程中不卡顿。

nwjs介绍参考https://www.jianshu.com/p/4ef35c300596。

打包

1. 在nwjs安装目录下建一个文件夹，如app，然后把项目生成的html,jss,css,icon放到一个文件夹拷贝到app文件夹下，创建package.json定义UI的一些属性，压缩成app.zip或zpp.7z，不能压缩成.rar格式。

{
  "main": "index.html",
  "name": "模拟导航",
  "description": "模拟导航",
  "version": "0.1.0",
  "keywords": ["模拟导航", "导航"],
  "window": {
    "title": "模拟导航",
    "icon": "icon.png",
    "toolbar": true,
    "frame": true,
    "width": 1090,
    "height": 750,
    "position": "center",
    "min_width": 1090,
    "min_height": 750,
    "max_width": 1920,
    "max_height": 1080,
    "resizable": true
  },
  "webkit": {
    "plugin": false,
    "java": false,
    "page-cache": false
  },
  "user-agent": "%name %ver %nwver %webkit_ver %osinfo",
  "chromium-args": "--allow-file-access-from-files"
}

2. 把app.zip改名成app.nw，拷贝app.nw到nwjs安装根目录下，在cmd里执行 copy /b nw.exe+app.zip app.exe，生成的app.exe双击执行。

3. 生成的app.exe不能拷贝到别的地方执行，需要使用Enigma Virtual Box打包。 把app.nw和app.exe剪切到别的地方，然后通过Add Folder Recursive把newjs根目录下的所有文件都加入，如

   
   
   image.png
   
   

   生成打包之后的exe双击执行。

4. 生成后的exe如果要改图标的话，需要用Resource Hacker打开exe，找到对应的icon，然后替换掉

   
   
   image.png
   
   

   注意尺寸大小要一样，不然报错。

应用自动关闭

参考https://github.com/nwjs/nw.js/wiki/Window

// Load native UI library
var gui = require('nw.gui'); //or global.window.nwDispatcher.requireNwGui() (see https://github.com/rogerwang/node-webkit/issues/707)

// Get the current window
var win = gui.Window.get();


win.on('close', function() {
  this.hide(); // Pretend to be closed already
  console.log("We're closing...");
  //alert("prepare to close");
  this.close(true);
});

setTimeout("win.close()", 10000);

在index.html里引入这个js，10秒后即可关闭应用进程。

操作本地文件

nwjs支持nodejs，可以使用nodejs的fs模块对本地文件进行读写，只能操作普通用户的目录，不能操作只有管理员才有权限的目录。

开发快速打包

在nwjs根目录中可以直接使用nw 文件夹即能快速运行项目，不需要手动打包，具体怎么和npm集成，以后有时间再研究。
还可以使用nw-builder打包参考https://www.cnblogs.com/zoo-x/articles/11934057.html，以后再研究。