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

引用

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