作为程序员一定要保持良好的睡眠,才能好编程

使用nw把静态文件打包成exe文件

发布时间:2019-01-02

应项目需求,需要把开发好的项目,打包成 exe 安装文件。


在客户端使用 exe 进行安装,在桌面上生成一个快捷方式,打开应用。


市面有很多的方式方法制作 exe。


今天我们来看一下, 使用 nw 打包文件。  nw 全称 node-webkit


一、在 third 目录下 创建两个文件   index.html   package.json


nw.png


index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>demo</title>
</head>
<body>

<h1>你好世界</h1>


</body>
</html>


package.json

{
	"name": "Demo",
	"main" :"index.html",
	"description": "demo app of node-webkit",
  	"version": "0.1.0",
  	"window": {
  		"title": "1123  demo"
  	}
}

package.json 其他相关配置: https://github.com/nwjs/nw.js/wiki/Manifest-format



package.json

{
	"name": "Demo",
	"main" :"index.html",
	"description": "demo app of node-webkit",
  	"version": "0.1.0",
	"type": "chrome",
  	"window": {
  		"title": "1123  demo",
		"frame": true,
		"icon": "logo.png",
		"toolbar": true,
		"width": 1280,
		"height":680,
		"position": "center",
		"resizable": true,
		"min_width": 1028,
		"min_height": 600
  	}
}


single-instance

bool值。默认情况下,如果将node-webkit程序打包发布,那么只运行同时启动一个该应用的实例。如果你希望允许同时启动多个实例,将该值设置为false。




二、把这两个文件全选,建立一个 third.zip  的压缩包,并把扩展名 改成  zip 改成 nw   

nw3.png


三、下载一个windows版本的node-webkit,解压后得到一个文件夹

        选择你对应的下载文件 https://github.com/nwjs/nw.js#downloads


        这里我已经下载好了,我是window64的,https://pan.baidu.com/s/1EWQKiwjmkrHBISJ49f4bsA

        nw4.png 

    解压到当前目录,看下截图:

nw5.png



四、通过nw.exe 可以直接打开 third.nw 文件,我们打开一下看看效果

nw6.png


我们看到,已经可以支行了。




使用命令创建 exe 文件


1、把third.nw 文件,复制,放在 nwjs 解压的目录 third_nwjs 这个目录

nw7.png


2、使用命令 copy /b nw.exe+third.nw third.exe

        

    nw8.png



三、项目运行依赖整个nw文件,切记不要删除任何文件

        third.nw 除外



 我们看到一个绿色的exe应用程序就已经做好了,可以直接点击 third.exe 执行,打开应用。


但这有时候并不能满足我们的需求,我们需要在桌面上创建一个快捷方式,用户直接点击打开i,即可使用。



Enigma Virtual Box 打包应用


1、下载 

enigmavb.zip


然后在Enter Input File Name那里输入我们的app.exe的路径,在Enter Output File Name那里填写我们要把打包出来的可执行文件输出到哪里。最后是把除app.exe外的其它文件拖入到Files那里,遇到提示的话默认就可以了。

eng.png



最后点击右下角的Process按钮,就大功告成了。

 

最后我们得到了一个 app_boxed.exe 的文件,只要把这个文件交给用户,用户就可以运行了。


node-webkit虽然方便,但有个很大的缺点是得到的可执行文件有点大,大家在可以在衡量利弊后决定使不使用。


nw2.png



这种方式编译出来以后,就只有一个exe文件,且没有安装,不能在桌面上创建快捷方式




更换NW桌面应用图标icon


1、下载

Resource_Hacker_v5.1.6_Stable_Chs_th_sjy.zip

2、解压,打开Resource_hacker 这个软件,通过File-》打开  

     找到对应的执行文件,也就是通过上边  third.nw 生成的 third.exe 

    rh.png


rh2.png

找到对应的图标后,点击 替换  按钮


3、保存退出,保存后,会保存一份原始副本


rh3.png


已经成功替换了桌面图标。


备注:当程序安装成功后,会在桌面上看到我们设置的小图标,但在最小化后,还会显示一个图标,这个图标是在 package.json window的属性中配置的。





推荐使用 Inno setup 安装制作软件 


1、下载 Inno setup 软件  https://pc.qq.com/detail/13/detail_1313.html


innosetup.png


进行安装.


2、把软件汉化

inno2.png

找到安装软件的目录,进入 Languages,把 Chinase.isl 放到这个目录。

Chinese.zip


通过上边的这个设置后,就可以制作 中文版的安装包了。



3、使用软件,进行安装包制作

     

https://jingyan.baidu.com/article/36d6ed1f50ecfc1bcf4883aa.html


4、软件制作成功

inno3.png

软件运行界面



安装.png


nwjs相关配置、打开文件、保存文件、目录创建 Window下的窗口拖拽与窗口大小控制

http://www.cnblogs.com/xuanhun/category/568577.html


修改nw.jsexe文件使其请求管理员权限

 

nw.js FrameLess Window下的窗口拖拽与窗口大小控制

 

nw.js如何处理拖放操作

 

nw.js桌面软件开发系列 0.1 HTML5和桌面软件开发的碰撞

 

node-webkit教程(15)当图片加载失败的时候

 

node-webkit教程(14)禁用缓存

 

node-webkit教程(13)gpu支持信息查看

 

NODE-WEBKIT教程(12)全屏

 

node-webkit教程(10)Platform ServiceFile dialogs

 

node-webkit教程(8)Platform ServiceClipboard

 

node-webkit教程(7)Platform ServiceAPP

 

NODE-WEBKIT教程(6)NATIVE UI API MENU(菜单)

 

NODE-WEBKIT教程(5)NATIVE UI API FRAMELESS WINDOW

 

node-webkit学习(4)Native UI API window

 

node-webkit学习(3)Native UI API概览

 

node-webkit学习(2)基本结构和配置

 

node-webkit学习(1hello world

 




直接在js中使用

var gui = require('nw.gui');
var win = gui.Window.get();
//最小化
win.minimize();
//最大化
win.maximize();
//取消最大化
win.unmaximize();