一个 EXE：打造跨平台应用

2023-10-14 12:31:03

将 HTML、JS 和 CSS 打包成单一 EXE 可执行程序：跨平台、安全且便捷

概览

将 HTML、JS 和 CSS 等网页文件打包成一个单一的 EXE 可执行程序文件提供了许多优势，包括跨平台兼容性、增强安全性以及方便分发。本文将深入探讨此过程，包括如何使用 Electron 框架实现它。

Electron 概述

Electron 是一个开源框架，使开发人员能够使用 HTML、JS 和 CSS 轻松创建跨平台桌面应用程序。Electron 将 Chromium 嵌入到一个原生应用程序外壳中，允许您构建在 Windows、Mac 和 Linux 上运行的应用程序。

将 HTML、JS 和 CSS 打包为 EXE

使用 Electron 将 HTML、JS 和 CSS 打包为 EXE 可执行程序文件的步骤如下：

安装 Electron： 从 Electron 官网下载并安装 Electron。
创建 Electron 项目： 使用 Electron 命令行工具 electron-quick-start 创建一个新项目。
添加文件： 将您的 HTML、JS 和 CSS 文件复制到 Electron 项目文件夹中。
创建主进程脚本： 在 main.js 文件中加载您的 HTML 文件。
打包项目： 使用 electron-packager 工具打包 Electron 项目。
运行 EXE 文件： 打包完成后，运行生成的 EXE 文件即可启动您的应用程序。

代码示例：

// main.js
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });
  mainWindow.loadFile('index.html');
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.on('ready', createWindow);
app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});