Examples Overview示例概述
In this section, we have collected a set of guides for common features that you may want to implement in your Electron application. 在本节中,我们收集了一组您可能希望在Electron应用程序中实现的常见功能指南。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.运行这些示例的最简单方法是下载Electron 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:安装Fiddle后,您可以按下“在Fiddle中打开”按钮,您将看到以下代码示例,如下所示:
- main.js
- preload.js
- index.html
const { app, BrowserWindow } = require('electron')
const path = require('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...?怎么做……?
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!如果您想做一些没有记录的事情,请加入Discord服务器并让我们知道!