创建一个Electron应用

原创已于 2025-06-28 16:12:09 修改 · 870 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#electron #javascript #前端

于 2025-06-26 23:15:26 首次发布

Electron 专栏收录该内容

3 篇文章

订阅专栏

Electron官方文档：创建您的第一个应用程序 | Electron

1.创建一个文件夹

这里我直接命名为Electron

2.初始化项目

进入创建的文件夹内，cmd回车打开命令行窗口，执行

npm init

初始化项目（一路回车）

之后打开原先的文件夹，看到文件夹中有package.json则说明初始化成功

注意

package.json中的"author"和"description"必须补充上，否则打包的时候可能会出现问题

3.安装electron依赖

执行

npm install electron --save-dev

当原文件夹中出现node_modules文件夹则说明依赖安装成功

4.运行electron项目

4.1 添加start命令

注意：start后面是"electron ."，不是"electron"

4.2 创建入口文件

注意：必须先创建入口文件再启动，否则启动失败！

package.json中的"main"值是index.js，这里我按照electron官方文档把入口文件改成main.js，故创建一个与package.json同级的main.js文件，并在其中写入console输出以验证启动是否正常

4.3 使用npm start启动项目

控制台成功输出'666'则启动成功！

5.基本使用

app.on('ready', () => {})

或

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

都表示在 app 模块的 ready 事件（event）触发后创建 BrowserWindows 实例，但app.whenReady() 方法，作为其 ready 事件的专用监听器，可以避免直接监听 .on 事件带来的一些问题。

5.1 创建基本窗口

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

app.on('ready', () => {
    new BrowserWindow({
        width: 800,  // 窗口宽度
        height: 600,  // 窗口高度
        autoHideMenuBar: true, // 隐藏默认的菜单栏
        x: 0,  // 窗口在横坐标上的位置
        y: 0,  // 窗口在纵坐标上的位置
        alwaysOnTop: true,  // 窗口置顶
    });
})

BrowserWindow的更多属性：BrowserWindow | Electron

5.2 窗口中插入网页

引用窗口用 .loadURL() 方法

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

app.on('ready', () => {
    const win = new BrowserWindow({
        width: 800,  // 窗口宽度
        height: 600,  // 窗口高度
        autoHideMenuBar: true, // 隐藏默认的菜单栏
        x: 0,  // 窗口在横坐标上的位置
        y: 0,  // 窗口在纵坐标上的位置
        alwaysOnTop: true,  // 窗口置顶
    });
    win.loadURL('http://www.baidu.com')
})

执行npm start得到：

5.3 窗口中插入本地html

引入本地html文件用 .loadFile() 方法

index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>index</title>
        <link rel="stylesheet" href="./index.css">
    </head>
    <body>
        <h1>Electron开发</h1>
    </body>
</html>

index.css
h1 {
    background-color: #000;
    color: #fff;
}

main.js
const { app, BrowserWindow } = require('electron');

app.on('ready', () => {
    const win = new BrowserWindow({
        width: 800,  // 窗口宽度
        height: 600,  // 窗口高度
        autoHideMenuBar: true, // 隐藏默认的菜单栏
        x: 0,  // 窗口在横坐标上的位置
        y: 0,  // 窗口在纵坐标上的位置
        alwaysOnTop: true,  // 窗口置顶
    });
    win.loadFile('./pages/index.html')
})

注意

红色区域部分本质上是浏览器，使用快捷键ctrl+shift+i即可打开开发者工具（可禁用，这里留个坑，后续补上）

报错一：vs code控制台报错（可忽略）

报错二：应用内部控制台报错（内容安全策略）

解决方法：

在<head></head>内插入

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"/>

5.4 处理windows、Linux和macOS系统间关闭窗口的差异

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

function createWindow() {
    const win = new BrowserWindow({
        width: 800,  // 窗口宽度
        height: 600,  // 窗口高度
        autoHideMenuBar: true, // 隐藏默认的菜单栏
        x: 0,  // 窗口在横坐标上的位置
        y: 0,  // 窗口在纵坐标上的位置
        alwaysOnTop: true,  // 窗口置顶
    });
    win.loadFile('./pages/index.html')
}
// 这种写法跟app.on('ready', () => {})的结果时一致的
// app.whenReady().then(() => {
//     createWindow()
// })

app.on('ready', () => {
    createWindow();
    // （macOS专用）当应用被激活时，判断当前是否有窗口，若没有，则创建窗口
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
});

// 当所有窗口关闭，并且当前不是macOS系统时，退出应用
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
});

5.5 配置项目更新后自动重启

5.5.1 安装nodemon

npm i nodemon -D

5.5.2 修改 package.json 命令

"scripts": {
    "start": "nodemon --exec electron ."
},

5.5.3 配置 nodemon.json 规则

{
    "ignore": [
        "node_modules",
        "dist"
    ],  // 忽略哪些文件
    "restartable": "r",  // 短命令
    "watch": ["*.*"],
    "ext": "html,js,css"  // 包含哪些文件类型
}