Electron 入门实例
从空目录到能跑起来的应用：三个文件、一条命令。
Key Points一个 Electron 应用最少三个文件：package.json 声明入口，main.js 创建窗口，index.html 是界面。
1. package.json
JSON
{
"name": "hello-electron",
"version": "1.0.0",
"description": "第一个 Electron 应用",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^33.0.0"
}
}2. main.js
JavaScript
const { app, BrowserWindow } = require('electron');
const path = require('node:path');
function createWindow() {
const win = new BrowserWindow({
width: 900,
height: 640,
title: 'Hello Electron',
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
contextIsolation: true,
nodeIntegration: false
}
});
win.loadFile('index.html');
}
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});3. index.html
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; style-src 'self' 'unsafe-inline'">
<title>Hello Electron</title>
<style>
body { font-family: system-ui, sans-serif; display: grid; place-items: center;
height: 100vh; margin: 0; background: #0f172a; color: #e2e8f0; }
button { padding: .6rem 1.2rem; font-size: 1rem; border-radius: .5rem;
border: 0; background: #38bdf8; color: #0f172a; cursor: pointer; }
</style>
</head>
<body>
<div>
<h1 id="greet">Hello, Electron</h1>
<button id="btn">读取系统信息</button>
<p id="info"></p>
</div>
<script src="renderer.js"></script>
</body>
</html>4. preload.js
JavaScript
const { contextBridge } = require('electron');
contextBridge.exposeInMainWorld('api', {
info: () => ({
platform: process.platform,
arch: process.arch,
electron: process.versions.electron,
chrome: process.versions.chrome,
node: process.versions.node
})
});5. renderer.js
JavaScript
document.getElementById('btn').addEventListener('click', () => {
const i = window.api.info();
document.getElementById('info').textContent =
`${i.platform} / ${i.arch} · Electron ${i.electron} · Chromium ${i.chrome}`;
});6. 运行
Bash
npm install
npm startOutput
> hello-electron@1.0.0 start
> electron .When the window opens and the button prints system info, all three layers work. This skeleton is the starting point of every Electron project; everything else is additions.
The
default-src 'self' CSP matters: without it, any injected script can load external resources. Electron warns Insecure Content-Security-Policy in the console — do not ignore that warning.1. package.json
JSON
{
"name": "hello-electron",
"version": "1.0.0",
"description": "第一个 Electron 应用",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^33.0.0"
}
}2. main.js
JavaScript
const { app, BrowserWindow } = require('electron');
const path = require('node:path');
function createWindow() {
const win = new BrowserWindow({
width: 900,
height: 640,
title: 'Hello Electron',
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
contextIsolation: true,
nodeIntegration: false
}
});
win.loadFile('index.html');
}
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});3. index.html
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; style-src 'self' 'unsafe-inline'">
<title>Hello Electron</title>
<style>
body { font-family: system-ui, sans-serif; display: grid; place-items: center;
height: 100vh; margin: 0; background: #0f172a; color: #e2e8f0; }
button { padding: .6rem 1.2rem; font-size: 1rem; border-radius: .5rem;
border: 0; background: #38bdf8; color: #0f172a; cursor: pointer; }
</style>
</head>
<body>
<div>
<h1 id="greet">Hello, Electron</h1>
<button id="btn">读取系统信息</button>
<p id="info"></p>
</div>
<script src="renderer.js"></script>
</body>
</html>4. preload.js
JavaScript
const { contextBridge } = require('electron');
contextBridge.exposeInMainWorld('api', {
info: () => ({
platform: process.platform,
arch: process.arch,
electron: process.versions.electron,
chrome: process.versions.chrome,
node: process.versions.node
})
});5. renderer.js
JavaScript
document.getElementById('btn').addEventListener('click', () => {
const i = window.api.info();
document.getElementById('info').textContent =
`${i.platform} / ${i.arch} · Electron ${i.electron} · Chromium ${i.chrome}`;
});6. 运行
Bash
npm install
npm startOutput
> hello-electron@1.0.0 start
> electron .窗口出现、点按钮显示系统信息，就说明主进程、预加载、渲染三层都通了。这一套骨架是所有 Electron 项目的起点，后面只是往里加功能。
index.html 里的 CSP default-src 'self' 很关键。没有它，页面一旦被注入脚本就能加载任意外部资源。Electron 会在控制台警告 Insecure Content-Security-Policy，那个警告不要忽略。