应项目需求,需要把开发好的项目,打包成 exe 安装文件。
在客户端使用 exe 进行安装,在桌面上生成一个快捷方式,打开应用。
市面有很多的方式方法制作 exe。
今天我们来看一下, 使用 nw 打包文件。 nw 全称 node-webkit
一、在 third 目录下 创建两个文件 index.html package.json
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
三、下载一个windows版本的node-webkit,解压后得到一个文件夹
选择你对应的下载文件 https://github.com/nwjs/nw.js#downloads
这里我已经下载好了,我是window64的,https://pan.baidu.com/s/1EWQKiwjmkrHBISJ49f4bsA
解压到当前目录,看下截图:
四、通过nw.exe 可以直接打开 third.nw 文件,我们打开一下看看效果
我们看到,已经可以支行了。
使用命令创建 exe 文件
1、把third.nw 文件,复制,放在 nwjs 解压的目录 third_nwjs 这个目录
2、使用命令 copy /b nw.exe+third.nw third.exe
三、项目运行依赖整个nw文件,切记不要删除任何文件
third.nw 除外
我们看到一个绿色的exe应用程序就已经做好了,可以直接点击 third.exe 执行,打开应用。
但这有时候并不能满足我们的需求,我们需要在桌面上创建一个快捷方式,用户直接点击打开i,即可使用。
Enigma Virtual Box 打包应用
1、下载
然后在Enter Input File Name那里输入我们的app.exe的路径,在Enter Output File Name那里填写我们要把打包出来的可执行文件输出到哪里。最后是把除app.exe外的其它文件拖入到Files那里,遇到提示的话默认就可以了。
最后点击右下角的Process按钮,就大功告成了。
最后我们得到了一个 app_boxed.exe 的文件,只要把这个文件交给用户,用户就可以运行了。
node-webkit虽然方便,但有个很大的缺点是得到的可执行文件有点大,大家在可以在衡量利弊后决定使不使用。
这种方式编译出来以后,就只有一个exe文件,且没有安装,不能在桌面上创建快捷方式
更换NW桌面应用图标icon
1、下载
Resource_Hacker_v5.1.6_Stable_Chs_th_sjy.zip
2、解压,打开Resource_hacker 这个软件,通过File-》打开
找到对应的执行文件,也就是通过上边 third.nw 生成的 third.exe
找到对应的图标后,点击 替换 按钮
3、保存退出,保存后,会保存一份原始副本
已经成功替换了桌面图标。
备注:当程序安装成功后,会在桌面上看到我们设置的小图标,但在最小化后,还会显示一个图标,这个图标是在 package.json window的属性中配置的。
推荐使用 Inno setup 安装制作软件
1、下载 Inno setup 软件 https://pc.qq.com/detail/13/detail_1313.html
进行安装.
2、把软件汉化
找到安装软件的目录,进入 Languages,把 Chinase.isl 放到这个目录。
通过上边的这个设置后,就可以制作 中文版的安装包了。
3、使用软件,进行安装包制作
https://jingyan.baidu.com/article/36d6ed1f50ecfc1bcf4883aa.html
4、软件制作成功
软件运行界面
nwjs相关配置、打开文件、保存文件、目录创建 Window下的窗口拖拽与窗口大小控制
http://www.cnblogs.com/xuanhun/category/568577.html
nw.js FrameLess Window下的窗口拖拽与窗口大小控制
nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞
node-webkit教程(10)Platform Service之File dialogs
node-webkit教程(8)Platform Service之Clipboard
node-webkit教程(7)Platform Service之APP
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概览
直接在js中使用
var gui = require('nw.gui'); var win = gui.Window.get(); //最小化 win.minimize(); //最大化 win.maximize(); //取消最大化 win.unmaximize();