示例预览

在本节中，我们收集了一些新手通用的功能示例，可以让你快速实现需要的 Electron 应用。 每个例子都包含一个简单的、自成一体的示例应用程序。 运行这些示例的最简单方法是下载 Electron Fiddle。

一旦安装了Fiddle，就可以按下 “Open in Fiddle”按钮，然后会在下面找到以下代码样本：

docs/fiddles/quick-start (23.0.0)Open in Fiddle

  • main.js
  • preload.js
  • index.html
  1. const { app, BrowserWindow } = require('electron')
  2. const path = require('path')
  4. function createWindow () {
  5.   const win = new BrowserWindow({
  6.     width: 800,
  7.     height: 600,
  8.     webPreferences: {
  9.       preload: path.join(__dirname, 'preload.js')
  10.     }
  11.   })
  13.   win.loadFile('index.html')
  14. }
  16. app.whenReady().then(() => {
  17.   createWindow()
  19.   app.on('activate', () => {
  20.     if (BrowserWindow.getAllWindows().length === 0) {
  21.       createWindow()
  22.     }
  23.   })
  24. })
  26. app.on('window-all-closed', () => {
  27.   if (process.platform !== 'darwin') {
  28.     app.quit()
  29.   }
  30. })
  1. window.addEventListener('DOMContentLoaded', () => {
  2.   const replaceText = (selector, text) => {
  3.     const element = document.getElementById(selector)
  4.     if (element) element.innerText = text
  5.   }
  7.   for (const type of ['chrome', 'node', 'electron']) {
  8.     replaceText(`${type}-version`, process.versions[type])
  9.   }
  10. })
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Hello World!</title>
  6.     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  7. </head>
  8. <body>
  9.     <h1>Hello World!</h1>
  10.     <p>
  11.         We are using Node.js <span id="node-version"></span>,
  12.         Chromium <span id="chrome-version"></span>,
  13.         and Electron <span id="electron-version"></span>.
  14.     </p>
  15. </body>
  16. </html>

How to…?

你可以在边栏中找到各种 “How to？”的完整列表。 如果有任何你想知道的内容，但未被文档所记录，请加入我们的 Discord server 并让我们知道！