# Electron 应用封装帮助文档

## 一、项目背景

本文档记录了如何将课程查询系统（HTML版）封装为可执行的桌面应用程序，使用Electron框架实现。

## 二、准备工作

### 1. 系统环境

• Windows 10/11 操作系统
• Node.js LTS 版本（v22.20.0）
• npm 包管理器（v10.9.3）

### 2. 检查环境

打开命令提示符，输入以下命令检查Node.js和npm是否安装成功：

“`bash

node -v

查看Node.js版本

npm -v

查看npm版本

“`

## 三、安装步骤

### 步骤 1：设置国内 npm 镜像（解决网络问题）

“`bash

npm config set registry https://registry.npmmirror.com

“`

### 步骤 2：创建项目目录并初始化

“`bash

创建项目目录

mkdir electron-app

进入目录

cd electron-app

初始化项目

npm init -y

“`

### 步骤 3：安装 Electron

“`bash

npm install electron –save-dev

“`

### 步骤 4：创建必要文件

1. **创建 main.js 文件**（Electron 主入口）：

“`javascript

const { app, BrowserWindow } = require(‘electron’);

const path = require(‘path’);

function createWindow() {

const mainWindow = new BrowserWindow({

width: 1200,

height: 800

});

mainWindow.loadFile(‘index.html’);

}

app.whenReady().then(() => {

createWindow();

app.on(‘activate’, function () {

if (BrowserWindow.getAllWindows().length === 0) createWindow();

});

});

app.on(‘window-all-closed’, function () {

if (process.platform !== ‘darwin’) app.quit();

});

“`

2. **复制 index.html 文件**：

将课程查询系统的 index.html 文件复制到 electron-app 目录中。

### 步骤 5：更新 package.json 配置

“`json

{

“name”: “electron-app”,

“version”: “1.0.0”,

“description”: “课程查询系统 – 单机版”,

“main”: “main.js”,

“scripts”: {

“start”: “electron .”,

“build”: “electron-builder”

},

“build”: {

“appId”: “com.example.coursequery”,

“productName”: “课程查询系统”,

“win”: {

“target”: [“nsis”, “portable”]

},

“nsis”: {

“oneClick”: true,

“perMachine”: true,

“deleteAppDataOnUninstall”: false

}

},

“keywords”: [],

“author”: “”,

“license”: “ISC”,

“devDependencies”: {

“electron”: “^28.0.0”,

“electron-builder”: “^24.0.0”

}

}

“`

### 步骤 6：安装打包工具

“`bash

npm install electron-builder –save-dev

“`

### 步骤 7：测试运行

“`bash

npm start

“`

### 步骤 8：打包为可执行文件

“`bash

npm run build

“`

## 四、常见问题及解决方案

### 1. 网络问题

**症状**：安装Electron时出现网络超时或连接重置

**解决方法**：

• 设置国内npm镜像：npm config set registry https://registry.npmmirror.com
• 检查网络连接是否稳定
• 暂时关闭防火墙或代理

### 2. 打包错误

**症状**：执行 `npm run build` 时出现错误

**解决方法**：

• 确保package.json文件中的脚本名称正确（”build”）
• 检查依赖是否安装完整：删除node_modules文件夹后重新安装
• 确保网络连接正常，electron-builder需要下载一些依赖文件

### 3. 图标修改

**症状**：想更换exe文件的图标

**解决方法**：

• 准备.ico格式的图标文件
• 在package.json中添加图标配置
• 重新打包应用

## 五、文件管理

### 可删除的文件

开发完成后，以下文件/文件夹可以删除：

• node_modules 文件夹（依赖包）
• package.json 和 package-lock.json 文件（项目配置）
• main.js 文件（开发时的源文件）
• index.html 文件（源文件，已打包到dist中）

### 必须保留的文件

– `dist` 文件夹（包含完整的应用程序，必须完整保留）

## 六、使用说明

### 运行应用

1. 进入 `dist` 文件夹
2. 双击 `课程查询系统.exe` 文件即可运行
3. 或为 exe 文件创建桌面快捷方式

### 应用特性

• 独立运行，无需浏览器
• 数据存储在应用的用户数据目录中，不会丢失
• 所有功能与网页版完全一致
• 支持离线使用

## 七、技术原理

Electron 是一个跨平台的桌面应用开发框架，它结合了：

• Chromium：用于渲染网页内容
• Node.js：提供后端功能
• 原生API：访问操作系统功能

通过Electron，我们可以将任何网页应用打包为桌面可执行文件，实现”一次开发，多处运行”的目标。

## 八、总结

通过本教程，我们成功将课程查询系统封装为桌面应用程序，解决了网络安装问题，并完成了应用的打包和部署。封装后的应用具有更好的用户体验，无需打开浏览器即可运行，适合在各种环境中使用。