示例概述

🌐 Examples Overview

在本节中，我们收集了一系列指南，介绍你可能希望在 Electron 应用中实现的常见功能。每个指南都包含一个在最小、独立示例应用中的实用示例。运行这些示例的最简单方法是下载电子小提琴。

🌐 In this section, we have collected a set of guides for common features that you may want to implement in your Electron application. Each guide contains a practical example in a minimal, self-contained example app. The easiest way to run these examples is by downloading Electron Fiddle.

一旦安装了 Fiddle，你可以点击“在 Fiddle 中打开”按钮，该按钮会出现在如下代码示例的下方：

🌐 Once Fiddle is installed, you can press on the "Open in Fiddle" button that you will find below code samples like the following one:

docs/fiddles/quick-start (40.6.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...?

你可以在侧边栏找到完整的“如何做？”列表。如果有你想做但未被记录的内容，请加入我们的Discord 服务器并告诉我们！

🌐 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!

如何...？​

如何...？