进阶 electronjs.org 2026-10-07 23:51:43 · 8 阅读
第24章 Electron 应用示例概览与 Fiddle 快速实践
示例概览
本节收录了针对常见功能的一套指南，帮助你在 Electron 应用中实现这些特性。每个指南都包含一个实用示例，并配有一个极简、自包含的示例应用。
运行这些示例最简单的方式是下载 Electron Fiddle。安装 Fiddle 后，你可以点击类似下方代码示例旁边的“在 Fiddle 中打开”按钮：
docs/fiddles/quick-start (44.6.0)在 Fiddle 中打开main.jspreload.jsindex.htmlconst { app, BrowserWindow } = require('electron/main')
const path = require('node:path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
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()
}
})
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
Hello World!
如何……？ 你可以在侧边栏找到完整的“如何？”列表。
const path = require('node:path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
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()
}
})
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
We are using Node.js ,
Chromium ,
and Electron .
如何……？ 你可以在侧边栏找到完整的“如何？”列表。
