記一次使用 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 將網頁打包成應用程序