前端导航项目基于nodejs+vue开发，使用electron打包成exe进行安装到大屏运行，在模拟导航过程中会感觉到有稍微卡顿现象。
改成nwjs打包成exe，运行过程中不卡顿。
nwjs介绍参考https://www.jianshu.com/p/4ef35c300596。
打包
- 在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"
}
- 把app.zip改名成app.nw，拷贝app.nw到nwjs安装根目录下，在cmd里执行 copy /b nw.exe+app.zip app.exe，生成的app.exe双击执行。
-
生成的app.exe不能拷贝到别的地方执行，需要使用Enigma Virtual Box打包。 把app.nw和app.exe剪切到别的地方，然后通过Add Folder Recursive把newjs根目录下的所有文件都加入，如
image.png
生成打包之后的exe双击执行。
-
生成后的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，以后再研究。
网友评论