记一次使用 Electron 打包在线网页
安装环境
- electron + electron-packager
- Powershell 3 或 3 以上版本
- NET 4.5 或 4.5 以上版本
- Inno Setup 5，用于制作安装包
安装全局环境
执行命令 npm install electron -g 实现全局安装 Electron
将线上页面打包成 exe 格式
准备应用图标
新建一个文件夹，并准备一个 App 图标，图标格式为 ico
填写 package.json 和 main.js
package.json 的模板如下，主要修改的是 name、version、description 等
{
"name": "envProtection",
"version": "1.0.0",
"description": "环保智慧化管理系统",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron .",
"pack": "electron-packager . 环保智慧化管理系统 --win --out ../envp --arch=x64 --icon=envprotection.ico --app-version=1.0.0 --electron-version=9.4.1 --overwrite"
},
"author": "jmld",
"license": "ISC",
"devDependencies": {
"electron": "^11.4.11",
"electron-package": "^0.1.0",
"electron-packager": "^15.2.0"
}
}
main.js的模板如下，主要修改的是win.loadURL()里面的地址即可
const electron = require('electron');
const Menu = electron.Menu
// 控制应用生命周期的模块
const {app} = electron;
// 创建本地浏览器窗口的模块
const {BrowserWindow} = electron;
// 指向窗口对象的一个全局引用，如果没有这个引用，那么当该javascript对象被垃圾回收的
// 时候该窗口将会自动关闭
let win;
function createWindow() {
// 隐藏菜单栏
//Menu.setApplicationMenu(null);
// 创建一个新的浏览器窗口
win = new BrowserWindow({width: 1366, height: 768, show: false});
win.setAutoHideMenuBar(true);
// 并且装载应用的index.html页面
win.loadURL(`http://www.kmhzhxt.com/`);
// 打开开发工具页面
//win.webContents.openDevTools();
// 当窗口关闭时调用的方法
win.on('closed', () => {
// 解除窗口对象的引用，通常而言如果应用支持多个窗口的话，你会在一个数组里
// 存放窗口对象，在窗口关闭的时候应当删除相应的元素。
win = null;
});
// 加载完成后弹出登录框
win.once('ready-to-show', () => {
win.setTitle("环保智慧化管理系统");
win.show();
});
}
// 当Electron完成初始化并且已经创建了浏览器窗口，则该方法将会被调用。
// 有些API只能在该事件发生后才能被使用。
app.on('ready', createWindow);
/* var mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: false
}
}); */
// 当所有的窗口被关闭后退出应用
app.on('window-all-closed', () => {
// 对于OS X系统，应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// 对于OS X系统，当dock图标被点击后会重新创建一个app窗口，并且不会有其他
// 窗口打开
if (win === null) {
createWindow();
}
});
// 在这个文件后面你可以直接包含你应用特定的由主进程运行的代码。
// 也可以把这些代码放在另一个文件中然后在这里导入。
打包应用
在文件夹处打开命令行，先安装打包环境到该文件夹，输入如下命令即可。
npm install electron -D 和 npm install electron-package -D
接着，输入如下命令，即可打包一个 demo 的客户端。
electron-packager . app --win --out ./appBox --arch=ia32 --app-version 1.0.0 --icon=envprotection.ico --overwrite --ignore=node_modules
其中 --arch 为打包的架构，可选择x64和ia32两种；
这条命令的意思是 electron-packager .exe文件名称--win --out ./文件夹名称--arch=64位 --app-version版本号--icon=打包后文件的图标--每次调用覆盖文件--ignore=不打包的内容。
执行完成后，会在该目录下生成一个appBox目录，可根据具体需求修改内部的文件夹和应用名称，打开内部的 exe 文件来测试功能。
做成安装包形式
在安装完 Inno Setup 5 并设置好以管理员身份运行之后，直接在appBox目录的同级目录下生成一个打包用的iss文件，具体模板如下：
; 脚本由 Inno Setup 脚本向导 生成！
; 有关创建 Inno Setup 脚本文件的详细资料请查阅帮助文档！
#define MyAppName "环保管家智慧化管理系统"
#define MyAppVersion "1.0.0"
#define MyAppPublisher "广东科明昊环保科技有限公司"
#define MyAppURL "https://www.kmhzhxt.com/"
#define MyAppExeName "环保智慧化管理系统.exe"
[Setup]
; 注: AppId的值为单独标识该应用程序。
; 不要为其他安装程序使用相同的AppId值。
; (生成新的GUID，点击 工具|在IDE中生成GUID。)
AppId={{9FD10F3E-6F0F-A35F-104D-8DFB505232B5}
AppName={#MyAppName}
AppVersion={#MyAppVersion}
;AppVerName={#MyAppName} {#MyAppVersion}
AppPublisher={#MyAppPublisher}
AppPublisherURL={#MyAppURL}
AppSupportURL={#MyAppURL}
AppUpdatesURL={#MyAppURL}
DefaultDirName={pf}\{#MyAppName}
DefaultGroupName={#MyAppName}
AllowNoIcons=yes
OutputDir=.\
OutputBaseFilename={#MyAppName}v{#MyAppVersion}
;SetupIconFile=..\LD.Plugin.Browser\logo.ico
Compression=lzma
SolidCompression=yes
Uninstallable=yes
PrivilegesRequired=admin
[Languages]
Name: "chinesesimp"; MessagesFile: "compiler:Default.isl"
[Tasks]
Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: checkedonce
Name: "quicklaunchicon"; Description: "{cm:CreateQuickLaunchIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: checkedonce
[Files]
Source: "环保管家客户端\环保智慧化管理系统.exe"; DestDir: "{app}"; Flags: ignoreversion
Source: "环保管家客户端\*"; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs
; 注意: 不要在任何共享系统文件上使用“Flags: ignoreversion”
[Code]
procedure CurStepChanged(CurStep: TSetupStep);
var appWnd: HWND;
begin
if CurStep = ssInstall then
begin
// 检查××进程是否在运行，是则关闭进程
appWnd := FindWindowByWindowName('LDBrowser');
if (appWnd <> 0) then
begin
PostMessage(appWnd, 18, 0, 0); // quit
end;
end;
end;
// 卸载前检查关闭**进程
procedure CurUninstallStepChanged(CurUninstallStep: TUninstallStep);
var appWnd: HWND;
begin
// 检查**进程是否在运行，是则关闭进程
appWnd := FindWindowByWindowName('LDClient');
if (appWnd <> 0) then
begin
PostMessage(appWnd, 18, 0, 0); // quit
end;
end;
function InitializeSetup(): Boolean;
var Path:string;
ResultStr:string;
ResultCode: Integer;
appWnd: HWND;
begin
appWnd := FindWindowByWindowName('{#MyAppName}');
if (appWnd <> 0) then
begin
PostMessage(appWnd, 18, 0, 0); // quit
end;
//卸载旧版本
if RegQueryStringValue(HKLM, 'Software\JMLIDE\{#MyAppName}\Settings', 'Uninstall', ResultStr) then
begin
if MsgBox('需要卸载旧版本才能继续安装，是否继续？', mbConfirmation, MB_YESNO) = idYes then
begin
Exec(ResultStr, '/silent', '', SW_HIDE, ewWaitUntilTerminated, ResultCode);
end
else
begin
Result :=false;
exit;
end;
end;
result := true;
end;
[Icons]
Name: "{group}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"
Name: "{group}\{cm:ProgramOnTheWeb,环保管家智慧化管理系统}"; Filename: "{#MyAppURL}"
Name: "{group}\{cm:UninstallProgram,{#MyAppName}}"; Filename: "{uninstallexe}"
Name: "{commondesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon
Name: "{userappdata}\Microsoft\Internet Explorer\Quick Launch\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: quicklaunchicon
[Registry]
Root: HKLM; Subkey: "Software\kmhzhxt";Flags: uninsdeletekeyifempty
Root: HKLM; Subkey: "Software\kmhzhxt\{#MyAppName}";Flags: uninsdeletekey
Root: HKLM; Subkey: "Software\kmhzhxt\{#MyAppName}\Settings"; ValueType: string; ValueName: "Path"; ValueData: "{app}"
Root: HKLM; Subkey: "Software\kmhzhxt\{#MyAppName}\Settings"; ValueType: string; ValueName: "Uninstall"; ValueData: "{uninstallexe}"
Root: HKLM; Subkey: "Software\kmhzhxt\{#MyAppName}\Settings"; ValueType: string; ValueName: "Version"; ValueData: "{#MyAppVersion}"
[Run]
Filename: "{app}\{#MyAppExeName}"; Description: "{cm:LaunchProgram,{#StringChange(MyAppName, '&', '&&')}}"; Flags: nowait postinstall skipifsilent
具体要修改的点是开头的 #define 的内容和 Source 的路径和内部可执行文件名称，其余照旧。修改完成后，点击编译，即可生成具体的应用安装包。
总结
首先要安装相应的环境，再通过具体的参数来配置程序，然后生成一个可执行文件应用，最后使用 Inno Setup 5 将应用做成安装包。
