NW集成打包自定义图标及注意事项

本文链接：https://blog.csdn.net/qq_38417082/article/details/105346965

这个是关于NW打包的第二篇博客,第一篇主要讲NW基本用法&打包,此篇主要讲的是后续一些优化的功能.包括NW文件整体打包成一个exe在生产环境直接安装,自定义exe图标快捷方式图标等;这些功能都需要额外的工具软件支持,用到的是ResourceHacker Inno Setup这两个软件0.44.1 SDK&PRODUCT&软件下载…

1.RH自定义exe图标

(1)下载安装ResourceHacker后打开软件,依次执行 file-> open -> 选择对应app.exe存放目录并选中生成的exe文件,右击Icon Group IDR_MAINFRAME,在弹出的菜单中选择replace icon -> open file… -> 选择自定义的ico格式的图标
在这里插入图片描述
(2)再次打开,可以查看图标已经修改成功了;需要注意的是,在文件夹中exe的标注有时候没有改变,这个主要是因为缓存的问题;个人刷新了几次,还是没有变化,这个以RH为准就可以(不影响后续Inno Setup编译,RH查看exe图标改变了即可),多等一下让子弹飞一会儿或者重启一下;这个也是一个问题,没有找到好的办法,有知道的大佬可以指正一下;好了,第一个问题处理好了,继续下一步
在这里插入图片描述

2.集成打包

(1)下载安装Inno Setup后打开软件,依次执行file -> new->next(个人没有勾选创建一个新的JS文件),弹窗如下,可以输入打包后应用的一些信息
在这里插入图片描述
(2)点击next同理选填一些exe的信息,不赘述

(3)点击next,进入如下

1)选择在nw中生成的app.exe路径,地址会自动填充到输入框中
2)添加app.exe运行依赖的文件,也就是nw SDK文件夹中的所有文件;选择添加文件夹,直接选中解压的nw SDK文件夹;框选处的 * 表示的就是该文件夹下的全部文件;

(3)next下一步,可以选择是否创建快捷方式等配置,默认勾选
在这里插入图片描述
(4)next下一步,根据项目需求,自行配置,是否有一些证书配置,不赘述

(5)next下一步

(6)选择exe语言,根据项目需求,自行配置

(7)next,选择打包后输出目录名称快捷方式图标以及安装密码,

(8)next -> finish,选择保存的打包文档iss文件地址即可,打包结束;双击打包输出文件夹中的exe安装即可
在这里插入图片描述

注意

1.项目中要保持英文命名规范,不能有中文命名的文件.即使没有引用也不可以,否则安装后进入应用后只会显示NW的界面,奇葩的是SDK调试并不会校验这个问题,这个坑我排查了将近一天,最后发现是有一个没有引用的中文命名的图片.
2.引用H5 video音频按钮式灰色的,无法开启;这个因为ffmpeg.dll音频文件的问题,github下载 ffmpeg.dll.在NW项目中替换即可(不再赘述,github讲的很清楚)
3.项目中的console.warn/error,在发布生产版本时一定要删掉,可能会被安全系统/防火墙/杀毒软件识别有病毒,导致安装失败

自动全屏 F11全屏 ESC退出全屏

自动全屏,在app文件夹中的package.json中配置 fullscreen:true即可
F11全屏 ESC退出全屏主要参考的NW文档,定义其快捷方式功能,比较简单不再赘述.个人的做法是,将下面的代码作为一个JS脚本直接在HTML引用

nw.App.registerGlobalHotKey(
    new nw.Shortcut({
      key: "Escape",
      active: function() {
        nw.Window.get().leaveFullscreen();
      }
    })
  );
  nw.App.registerGlobalHotKey(
    new nw.Shortcut({
      key: "F11",
      active: function() {
        nw.Window.get().enterFullscreen();
      }
    })
  );