示例预览 | Electron 跳转到主内容 Electron 文档 应用开发接口（API） 博客 工具 * Electron Forge * Electron Fiddle 社区 * 治理 * 案例展示 * 资源 版本发布 中文 * English * Deutsch * Español * Français * 日本語 * Português * Русский * 中文 搜索 * 开始上手 * Electron 中的流程 * 最佳实践 * 示例 * Dark Mode * 设备访问 * 应用程序内购 * * 键盘快捷键 * 深度链接 (Deep Links) * 桌面启动器快捷操作 * * Menus * 多线程 * 原生文件拖 & 放 * 导航历史 * 通知（Notifications） * 离屏渲染 * 在线/离线事件探测 * 进度条 * 最近的文件 * * * 在 BrowserWindow 中展示文件 * * 拼写检查器 * Web 嵌入 * 任务栏自定义 * * 自定义窗口 * 开发 * Native Node Modules * 分发 * 检测和调试 * 引用 * 参与贡献 * * 示例 在本页面 示例预览 在本节中，我们收集了一些新手通用的功能示例，可以让你快速实现需要的 Electron 应用。 每个例子都包含一个简单的、自成一体的示例应用程序。 运行这些示例的最简单方法是下载 Electron Fiddle 。 一旦安装了Fiddle，就可以按下 "Open in Fiddle"按钮，然后会在下面找到以下代码样本： docs/fiddles/quick-start ( 43.4.0 ) Open in Fiddle * main.js * preload.js * index.html const { 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 ] ) } } ) <! 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 > < h1 > Hello World! </ h1 > < p > We are using Node.js < span id = " node-version " > </ span > , Chromium < span id = " chrome-version " > </ span > , and Electron < span id = " electron-version " > </ span > . </ p > </ body > </ html > How to...? ​ 你可以在边栏中找到各种 “How to？”的完整列表。 如果有任何你想知道的内容，但未被文档所记录，请加入我们的 Discord server 并让我们知道！ 编辑此页面 上一个 安全 下一个 Dark Mode * How to...? 文档 * 入门指南 * API 参考 清单 * 性能 * 安全 工具 * Electron Forge * Electron Fiddle 社区 * 治理 * 资源 * Discord * Bluesky * X * Mastodon * Stack Overflow 更多 * GitHub * Open Collective * 基础看板 版权所有 OpenJS Foundation 及 Electron 贡献者。保留所有权利。 OpenJS Foundation 已注册商标并使用商标。如需查看 OpenJS Foundation 的商标列表，请参阅我们的 商标政策 和 商标列表 。未在 OpenJS Foundation 商标列表 中标明的商标和标志，均为其各自持有者的商标™或注册商标®。使用它们并不意味着与它们有任何关联或得到它们的认可。 OpenJS Foundation | 使用条款 | 隐私政策 | 章程 | 行为准则 | 商标政策 | 商标列表 | Cookie 政策 Hosting and infrastructure graciously provided by