2025年利用electron框架构建桌面级应用【灰鸿】

科技前沿 • 2025-01-28 12:28 • 阅读 51

大家好，我是讯享网，很高兴认识大家。

前言

electron是一个可以利用 JavaScript HTML CSS 等技术构建原生程序的框架，也就是说，利用electron可以让我们使用web技术来开发桌面应用。electron的GUI核心来自于Chrome，使用V8（JavaScript引擎），本身是基于C++编写的。市面上很多的程序，都是用electron开发的，例如：vscode atom 等。

electron一个很大的特点就是跨平台。electron兼容Windows，Linux以及Mac平台，利用electron开发的程序可以在这几个平台上运行。electron基于chromium，nodejs，这就让你可以用HTML CSS JavaScript构建应用。并且还是开源的，拥有活跃的社区来维护项目。

讲了这么多，现在就让我们来构建第一个属于自己的electron程序吧！

准备

使用electron前，你需要安装nodejs。在终端输入以下命令，来检查nodejs是否安装 :

node -v

讯享网

讯享网npm -v

如果终端返回了相对应的nodejs与npm的版本信息，那么恭喜你，你可以进行下一步了；如果没有返回，那么你则需要安装nodejs与npm，然后重新输入命令检查，再进行下一步。

安装Electron

你可以创建一个名为"electron-app"的文件夹，然后打开它，并在这个文件夹当中执行终端。输入以下命令：

npm init -y

讯享网npm i --save-dev electron

Electron的基本目录结构

electron-app/
├── package.json
├── main.js
└── index.html

我们可以通过上面的结构，分别将 package.json main.js index.html 创建出来。

创建main.js

在electron-app目录下创建 main.js 文件（main.js是electron的主脚本文件，它指定了运行主进程electron程序的入口，在electron程序中，只能有一个 main.js 文件），你可以在 main.js 中输入以下代码：

讯享网const electron = require('electron') //导入模块 const BrowserWindow = electron.BrowserWindow const Menu = electron.Menu const app = electron.app function createWindow () { 
    const win = new BrowserWindow({ 
    width: 414, //定义窗口行高 height: 700, webPreferences: { 
    nodeIntegration: true } }) win.loadFile('index.html') //将index.html导入窗口 } app.whenReady().then(createWindow) //创建窗口 //侦听器 app.on('window-all-closed', () => { 
    if (process.platform !== 'darwin') { 
    app.quit() } }) app.on('activate', () => { 
    if (BrowserWindow.getAllWindows().length === 0) { 
    createWindow() } })

创建index.html

我们在 main.js 文件当中，将 index.html 文件加载到了窗口当中，那么index.html文件就是窗口的内容了

index.html 文件可以这样写：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> </head> <body style="background: white;"> <h1>Hello World!</h1> <p> 这是我的第一个electron程序！ </p> </body> </html>

修改package.json

编辑 package.json ，改为下面内容:

讯享网{ 
    "name": "electron-app", "version": "0.1.0", "author": "name", "description": "Electron app", "main": "main.js", "scripts": { 
    "start": "electron ." } }

运行程序

就这样，你的第一个electron程序已经编写好了，输入下面的命令来运行它吧：

npm start

运行成功:

打包程序

1.导入 `Electron Forge`

在终端输入下面的命令：

讯享网npx @electron-forge/cli import

2.创建分发版本

在终端输入以下命令：

npm run make

我们的第一个electron程序就被打包在out目录下了

2025年利用electron框架构建桌面级应用 【灰鸿】

前言

准备