Electron程序---初体验

1.先按照豆包给出的命令，安装需要的环境

我是Windows电脑

PS C:\Users\35536\Desktop> node -v
v24.19.0
PS C:\Users\35536\Desktop> npm -v
11.17.0

Node.js = 让 JavaScript 脱离浏览器，能直接在电脑 / 服务器上运行的运行环境

npm = Node.js 自带的包管理器（软件商店）

Node.js 是什么

以前 JavaScript 只能在浏览器里跑（操作网页、按钮、弹窗）。

Node.js 基于 Chrome 的 V8 引擎，把 JS 拿到系统本地运行：

✅ 读写电脑文件

✅ 启动网络服务、搭建后端接口

✅ 运行前端构建工具（Vite、Webpack、Vue/React 项目）

✅ 写脚本自动化处理文件

简单理解：给 JavaScript 开了权限，可以直接操作系统。

npm 是什么

npm 全称：Node Package Manager（Node 包管理器）

• 全世界最大的 JS 开源代码仓库
• 用来下载、管理别人写好的代码库（包）

创建项目

原生 Electron（最简，适合新手）

目录结构:

electron-win-demo/
├── package.json
├── main.js        # 主进程
├── preload.js     # 预加载脚本（IPC通信桥梁）
└── index.html

1. 初始化

mkdir electron-win-demo
cd electron-win-demo
npm init -y
npm i electron --save-dev

npm init -y

完整写法：npm init --yes

作用： 在当前文件夹自动创建 package.json 文件。

• package.json = 项目说明书：记录项目名称、版本、用到哪些依赖、启动脚本等。
• -y：全部默认确认，不用一路回车手动填写信息。

执行完目录会多出：package.json

⚠️ 注意：一定要先进入你的项目文件夹再执行，不要在桌面根目录随便运行。

npm i electron --save-dev

i 是 install 的简写，等价于

npm install electron --save-dev

electron 是什么

Electron：可以用 JS+HTML+CSS 写 桌面客户端软件

--save-dev 重点（很关键）

安装的包分为两类：

1. 生产依赖 --save（旧写法，现在默认） 程序打包后，软件运行时还需要的库。

2. 开发依赖 --save-dev（简写 -D） 👉 只在你开发、调试阶段需要；打包发布后的软件不需要它

Electron 本身属于开发构建工具，规范上都用 --save-dev

执行后变化：

1. package.json 里会多出一行 "devDependencies": { "electron": "^版本号" }
2. 自动生成 node_modules 文件夹，存放 electron 源码
3. 生成 package-lock.json 锁定版本，保证所有人安装版本一致

整套流程通俗总结

1. npm init -y：登记这个文件夹为一个 Node 项目
2. npm i electron -D：下载 Electron 开发框架，作为开发依赖

2. package.json

{
  "name": "electron-win-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "devDependencies": {
    "electron": "^33.0.0",
    "electron-builder": "^25.0.0"
  }
}

3. main.js（主进程，Windows 适配优化）

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

let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 900,
    height: 650,
    // Windows 可选：无边框
    // frame: false,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false,
      contextIsolation: true, // 安全隔离，必须开启
      sandbox: false
    }
  })

  mainWindow.loadFile('index.html')

  // 开发打开调试控制台
  // mainWindow.webContents.openDevTools()

  // 示例IPC 主进程接收渲染进程消息
  ipcMain.handle('win:get-platform', () => {
    return process.platform // win32
  })

  ipcMain.handle('file:get-path', () => {
    return app.getPath('userData') // Windows 用户数据目录
  })
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  // Windows 所有窗口关闭直接退出
  app.quit()
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

4. preload.js 桥接脚本

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  getPlatform: () => ipcRenderer.invoke('win:get-platform'),
  getUserDataPath: () => ipcRenderer.invoke('file:get-path')
})

5. index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Windows Electron 应用</title>
</head>
<body>
  <h1>Electron Windows Demo</h1>
  <button id="btn">获取系统信息</button>
  <script>
    const btn = document.getElementById('btn')
    btn.onclick = async () => {
      const platform = await window.electronAPI.getPlatform()
      const path = await window.electronAPI.getUserDataPath()
      alert(`系统：${platform}\n应用数据目录：${path}`)
    }
  </script>
</body>
</html>

运行项目

PS D:\TestCode\electron-win-demo> npm start

> electron-win-app@1.0.0 start
> electron .

实例：

main.js

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })
  win.loadURL('https://www.baidu.com')
}

app.whenReady().then(createWindow)

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

• require('electron')：引入 electron 模块
• 解构赋值 ，取出两个核心 API：
  • app：控制整个应用程序生命周期（启动、关闭、后台、窗口就绪等）
  • BrowserWindow：用来创建桌面窗口（相当于浏览器窗口）

Electron 分两大进程： ✅ 主进程 ：main.js，只有一个，负责创建窗口、操作系统权限 ✅ 渲染进程 ：每个窗口内部网页，相当于浏览器 tab

createWindow 函数

function createWindow () {
  // 创建窗口实例
  const win = new BrowserWindow({
    width: 800,    // 窗口宽度
    height: 600    // 窗口高度
  })
  // 窗口加载网页地址
  win.loadURL('https://www.baidu.com')
}

• new BrowserWindow()：弹出一个桌面窗口
• .loadURL()：加载在线网址

如果你想加载本地页面，换成： win.loadFile('index.html')

app.whenReady().then(createWindow)

• app.whenReady()：等待 Electron 应用初始化完成
• .then(...)：初始化完毕后执行函数
• 逻辑：程序准备就绪 → 调用 createWindow → 创建窗口