示例预览

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

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

  • index.html
  • main.js
  • preload.js
  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>
  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. })

Open in Fiddle

How to…?

You can find the full list of “How to?” in the sidebar. If there is something that you would like to do that is not documented, please join our Discord server and let us know!