一、下载nw.js
直接前往官网下载即可 https://nwjs.io/downloads/
二、封装最简单的客户端
nw.js下载完成后,在任意位置新建文件夹,例如nwtest,然后在文件夹中新建两个文件:index.html和package.json。
index.html文件内容为:
<!DOCTYPE html> <html> <head> </head> <body> <script language="javascript" type="text/javascript"> // 以下方式直接跳转 window.location.href='https://www.xxxx.com/'; </script> </body> </html>
package.json文件内容为:
{ "main": "index.html", "name": "测试客户端" }
字段解释:
{ /**指定程序的起始页面。*/ "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 } }
其中链接、name等可根据实际情况修改。
编辑完成后,将nwtest 文件夹整体拖动到nw.js文件夹中的nw.exe上,即可看到客户端打开的效果。
测试完成后,将nwtest下的文件压缩成一个zip,例如nwtest.zip,再修改后缀名nw,改成nwtext.nw,复制到nw.js文件夹下,然后在nw.js文件夹执行命令行:
copy /b nw.exe+nwtest.nw test.exe
即可在同一个路径下得到一个test.exe,就是我们最终得到的客户端文件,一个最简易的封装工作就完成了。
三、修改图标
客户端封装完成后,一个最常见的需求便是修改客户端的图标,我们只需将图标文件(png格式)加到nwtest文件夹下,然后修改package.json文件,在icon字段配置图标文件名,再重新打包即可:
{ "main": "index.html", "name": "智能工作台", "description": "智能工作台", "window":{ "title": "智能工作台", "icon":"main_tab_info_pressed.png" } }
值得一提的是,这个配置只能修改客户端打开时标题栏和电脑任务栏中显示的icon,exe文件本身的图标修改还要借助resource Hacker之类工具。具体方法可参考:https://jingyan.baidu.com/article/e75057f203892febc91a8916.html。
http://events.jianshu.io/p/203b30c0847b
NW.js和Electron优缺点综合对比:https://blog.csdn.net/LIangell/article/details/122055029