聚焦:Electron App 安装包定制 -- Inno Setup 脚本 Pascal Scripting 初探

来源:博客园   时间:2023-06-28 22:23:22

在做 Electron 项目时,有个需求是安装包安装时要给客户机上装上某个软件

在查看 Inno Setup 官网后发现是通过 .iss 脚本编写实现自定义安装过程


(相关资料图)

可在 .iss 内可以添加脚本为安装过程添加逻辑

为了测试方便我用 vite 新建一个全新的 electron 项目

用的是这个脚手架 https://github.com/electron-vite/electron-vite-vue

用其它脚手架也行,反正我们对 app 内容本身并不关注,只关心制作安装包

新建 electron 项目

安装注意事项(都是我踩过的坑..)

yarn config get registry

我用的是这个 https://registry.npm.taobao.org/

yarn create electron-vite

项目名 first-electron

模板我选了 vue ,其实无所谓我们只是跑个electron demo 目的是打包而不是开发

Project name: first-electron

Project template: Vue

成功后

cd first-electron yarn yarn dev

项目应该跑起来了可以看到 electron 窗口

关掉项目, 下一步测一下打包功能

编译打包 app

项目已经帮你整合了 electron-builder

直接运行打包命令

yarn build

大概率会失败

从 github 拉 electron 失败

需要从镜像服务器,设置 electron_mirror 到专门镜像 后再打包

yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/yarn build

成功后在项目 first-electron\release 目录下就是编译完成的 electron app 了

我的是在 first-electron\release\0.0.0 目录下,0.0.0 一看就是软件版本号了

项目根目录的 electron-builder.json5就是 electron-builder 配置文件

配置文件内的 "output": "release/${version}" 就是定义编译后的文件目录,一般不会去改

first-electron_0.0.0.exe这个文件就是单独文件的安装版,双击安装时会有安装过程

win-unpacked就是绿色版, 安装包的制作就是把这个文件夹内的文件进行打包

安装包自定义安装过程

如果想对安装包安装过程进行自定义

那么首先电脑上先安装 Inno Setup Compiler, 再创建 setup.iss 文件

通过 ide 新建 .iss 文件

过程如下:

打开 Inno Setup Compiler

新建一个 Inno Setup Script Wizard 开始创建 .iss 脚本文件

按提示一步步往下走,可以选择填写 app 名字,版本,公司之类的信息这些都不重要

直到 Application Files

Application main executable file 原默认的 Myprog.exe 主执行文件变更到我们自己 first-electron 的主执行文件,如下:

first-electron\release\0.0.0\win-unpacked\first-electron.exe

另外 Other application files: 这一项点击 Add folder... 按钮

把 win-unpacked 整个文件夹也添加进来

继续按提示往下走,直到 Compiler Settings 这一页

Custom compiler output folder: 选择打包文件输出目录

我选择输出到 first-electron\dist-setup 目录

继续按提示往下走,最后会让你保存成 .iss 文件,这个 .iss 文件就是打包脚本了

我在这个例子中输出文件保存为了 setup.iss

先不动这个脚本。直接编译,完成后可以在 first-electron\dist-setup 看到 windows 安装包了

安装程序完成后调用其它程序

比如主程序安装完后想自动执行安装东方财富的的安装文件 “dfcft8.exe”

(别问为什么是 “东方财富” 这个安装包,我的电脑的下载文件夹内刚好看到有这个.exe 执行文件就用这个来测试吧)

为什么要做这么流氓的事? 这只是举个例子而已!

其实,真实项目中有可能是客户机器上缺少某种环境或文件之类的东西,那么你可以利用此方法帮用户安装上

让我们开始吧。 非常的简单!

修改之前保存的 setup.iss 文件

在 setup.iss 文件中找到 [Run] 节点添加如下代码:

[Run]Filename: "{app}\resources\bin\dfcft8.exe"; Description: ""; Flags: nowait postinstall skipifsilent

使用 Inno setup compiler 编译该文件

安装程序最后会显示这样的画面:

点击 “完成” 按钮就会出现以下画面:

非常简单!

能不能在安装开始前就调用某个程序?

上面说的是安装程序安装完成后执行另外的一个程序,那么如果想在安装程序安装前执行呢?

[code]节点脚本控制安装过程

需要 Pascal 脚本了, 开始吧!

说实话作为长期使用 Javascript 的我来说第一次接触 Pascal Scripting 我心里一万头xx马奔腾而过

而且我看 Inno Setup Compiler 官网 的大概意思是 Pascal Scripting 不太好弄

官方建议用户从 Inno Setup 6\Examples安装目录下的 Examples 目录下参考官方提供的脚本例子

在 setup.iss 文件内添加 [code] 节点

这个节点允许你为安装过程添加逻辑,可细化到安装的每一步

它通过在 [code] 节点下暴露 Event Functions 实现,比如:

function InitializeSetup(): Boolean;procedure DeinitializeSetup();function InitializeUninstall(): Boolean;...

我姑且把它理解为生命周期吧!

那么如果想在安装开始时就调用

使用 InitializeSetup 并在其内用 Exec 方法调用 "dfcft8.exe"

下面实现安装过程开始之前前调用

[code]function InitializeSetup(): Boolean;var  ResultCode: Integer;begin  ExtractTemporaryFile("dfcft8.exe");  Exec(ExpandConstant("{tmp}\dfcft8.exe"), "", "", SW_SHOW, ewWaitUntilTerminated, ResultCode)  Log("InitializeSetup called");  Result := trueend;

为 setup.iss 添加上面代码后用 Inno Setup Compiler Ide 按 F9 或 Run 菜单 Run选项 "编译并启动"

安装包启动后点击"确定"按钮,Ide 会输出日志,也可以看到东方财富的安装程序也启动了

注意日志输出画面中的 这两句:

[15:19:26.074]   Created temporary directory: C:\Users\ADMINI~1\AppData\Local\Temp\is-8P52P.tmp[15:19:26.082]   Extracting temporary file: C:\Users\ADMINI~1\AppData\Local\Temp\is-8P52P.tmp\dfcft8.exe

意思是先建个临时文件夹,再从安装包中先解压出 "dfctt8.exe" 这个文件放到临时文件夹内

此时安装目录内是取不到文件的, 因为我们的 first-electron 程序还没有安装成功,也不会在客户电脑上有安装目录

只能从安装包这个压缩文件内解压获取临时文件

这是 setup.iss 现在的代码

; Script generated by the Inno Setup Script Wizard.; SEE THE DOCUMENTATION FOR DETAILS ON CREATING INNO SETUP SCRIPT FILES!#define MyAppName "first-electron"#define MyAppVersion "1.5"#define MyAppPublisher "My Company, Inc."#define MyAppURL "https://www.example.com/"#define MyAppExeName "first-electron.exe"#define MyAppAssocName MyAppName + " File"#define MyAppAssocExt ".myp"#define MyAppAssocKey StringChange(MyAppAssocName, " ", "") + MyAppAssocExt[Setup]; NOTE: The value of AppId uniquely identifies this application. Do not use the same AppId value in installers for other applications.; (To generate a new GUID, click Tools | Generate GUID inside the IDE.)AppId={{72C0FB3C-108B-4530-8D27-5D31B5349C3C}AppName={#MyAppName}AppVersion={#MyAppVersion};AppVerName={#MyAppName} {#MyAppVersion}AppPublisher={#MyAppPublisher}AppPublisherURL={#MyAppURL}AppSupportURL={#MyAppURL}AppUpdatesURL={#MyAppURL}DefaultDirName={autopf}\{#MyAppName}ChangesAssociations=yesDisableProgramGroupPage=yes; Uncomment the following line to run in non administrative install mode (install for current user only.);PrivilegesRequired=lowestOutputDir=C:\Users\Administrator\Desktop\first-electron\dist-setupOutputBaseFilename=first-electron-setupCompression=lzmaSolidCompression=yesWizardStyle=modern[Languages]Name: "english"; MessagesFile: "compiler:Default.isl"[Tasks]Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: unchecked[Files]Source: "C:\Users\Administrator\Desktop\first-electron\release\0.0.0\win-unpacked\{#MyAppExeName}"; DestDir: "{app}"; Flags: ignoreversionSource: "C:\Users\Administrator\Desktop\first-electron\release\0.0.0\win-unpacked\*"; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs; NOTE: Don"t use "Flags: ignoreversion" on any shared system files[Registry]Root: HKA; Subkey: "Software\Classes\{#MyAppAssocExt}\OpenWithProgids"; ValueType: string; ValueName: "{#MyAppAssocKey}"; ValueData: ""; Flags: uninsdeletevalueRoot: HKA; Subkey: "Software\Classes\{#MyAppAssocKey}"; ValueType: string; ValueName: ""; ValueData: "{#MyAppAssocName}"; Flags: uninsdeletekeyRoot: HKA; Subkey: "Software\Classes\{#MyAppAssocKey}\DefaultIcon"; ValueType: string; ValueName: ""; ValueData: "{app}\{#MyAppExeName},0"Root: HKA; Subkey: "Software\Classes\{#MyAppAssocKey}\shell\open\command"; ValueType: string; ValueName: ""; ValueData: """{app}\{#MyAppExeName}"" ""%1"""Root: HKA; Subkey: "Software\Classes\Applications\{#MyAppExeName}\SupportedTypes"; ValueType: string; ValueName: ".myp"; ValueData: ""[Icons]Name: "{autoprograms}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"Name: "{autodesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon[Run]Filename: "{app}\{#MyAppExeName}"; Description: "{cm:LaunchProgram,{#StringChange(MyAppName, "&", "&&")}}"; Flags: nowait postinstall skipifsilent; Filename: "{app}\resources\bin\dfcft8.exe"; Description: ""; Flags: nowait postinstall skipifsilent[code]function InitializeSetup(): Boolean;var  ResultCode: Integer;begin  ExtractTemporaryFile("dfcft8.exe");  Exec(ExpandConstant("{tmp}\dfcft8.exe"), "", "", SW_SHOW, ewWaitUntilTerminated, ResultCode);  Log("InitializeSetup called");  Result := trueend;

这里有个疑问,ExtractTemporaryFile("dfcft8.exe")路径

这里可没指定过 "dfcft8.exe" 文件位置,而且我明明是把它放在了 resources\bin\dfcft8.exe下,难道会自动搜索?

测试一下猜想

为了测试我把用另一个 "electron-fiddle.exe" 安装包放在 resources文件夹并且名称改为同样的 "dfcft8.exe" ,这样就有两个同名文件在不同文件夹下

resources\bin\"dfcft8.exe" resources\"dfcft8.exe" 

编译测试结果:

果然被改名为 "dfcft8.exe" 的 "electron-fiddle.exe" 被启动代替了东方财富的安装程序

官网我找不到资料,但测试后得到的结论是 ExtractTemporaryFile 会返回搜索到的第一个匹配文件

如果非要解压指定文件夹下的指定文件呢?

那么需要换种方法,像下面这样改:

[Files]Source: "C:\Users\Administrator\Desktop\first-electron\release\0.0.0\win-unpacked\resources\bin\dfcft8.exe"; DestDir: "{tmp}\resources\bin"[code]function InitializeSetup(): Boolean;var  ResultCode: Integer;begin  ExtractTemporaryFiles("{tmp}\resources\bin\dfcft8.exe")  Exec(ExpandConstant("{tmp}\resources\bin\dfcft8.exe"), "", "", SW_SHOW, ewWaitUntilTerminated, ResultCode);  Log("InitializeSetup called");  Result := trueend;

[Files] 节点指定 DestDir: "{tmp}\resources\bin"

[code] 节点内使用 ExtractTemporaryFiles("{tmp}\resources\bin\dfcft8.exe") 解压

并且 Exec 方法调用时也要传路径 ExpandConstant("{tmp}\resources\bin\dfcft8.exe")

编译测试一下

可以看到已经执行调用东方财富的安装程序

先别急着关掉,我们可以通过 log 输出的临时路径信息,找到对应的文件夹打开查看 C:\Users\ADMINI~1\AppData\Local\Temp\is-0467N.tmp

[17:15:15.953]   Created temporary directory: C:\Users\ADMINI~1\AppData\Local\Temp\is-0467N.tmp

果然临时文件夹内文件夹结构如我们所指定的那样

该路径会在安装程序结束时自动删除

用 [code] 实现安装完成后执行 "dfcft8.exe" 可执行文件

之前是在 [Run] 节点下实现,其实也可以用 procedure DeinitializeSetup()实现类似的功能

改动如下:

[code]function InstallDfcf: Boolean;var  ResultCode: Integer;begin  if not Exec(ExpandConstant("{app}\resources\bin\dfcft8.exe"), "", "", SW_SHOW, ewWaitUntilTerminated, ResultCode) then  begin    Log("安装东方财富失败. Error code: " + IntToStr(ResultCode));  end;end;procedure DeinitializeSetup();begin  InstallDfcf;end;

函数 DeinitializeSetup就是安装结束时调用自定义函数 InstallDfcf

InstallDfcf 函数内部的 Exec 调用了 "dfcft8.exe"

还有更多..

Inno Setup 其实可定制化的功能还有很多,官网文档就仁者见仁智者见智了

全面详细学习 Inno Setup 没啥意义,用哪个功能直接了解这一块儿就行,就是学习各种配置

现在有 chatgpt,还记啥配置呢,不明白可以直接问它,chatgpt 真是事半功倍啊,反正我就是这么做的

我们该把时间用于更有意义的地方,比如摸鱼!

博客园: http://cnblogs.com/willian/github: https://github.com/willian12345/

最新资讯

业界