记一次使用 Electron 打包在线网页

2021-09-04 03:07:22

安装环境

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 将应用做成安装包。

引用

使用electron 将网页打包成应用程序