Electron 是一款开放源代码库,可用于构建跨平台桌面应用程序。通过 Electron,你可以使用 Web 技术(如 HTML、CSS 和 JavaScript)来开发原生应用程序。Electron 应用程序可以在 macOS、Windows 和 Linux 上运行。
Electron 开发文档地址
Electron 的官方开发文档是了解 Electron 开发的最佳资源,包括 API 文档、教程、示例和指导方针。你可以在以下链接找到它:
简单实例
以下是一个基本的 Electron 应用程序示例,该应用程序创建一个窗口并加载一个 HTML 文件:
main.js
文件(主进程代码)
1. 创建 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('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
index.html
文件(渲染进程代码)
2. 创建 <!DOCTYPE html>
<html>
<head>
<title>My Electron App</title>
</head>
<body>
<h1>Hello Electron!</h1>
</body>
</html>
package.json
文件
3. 创建 {
"name": "my-electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^21.4.4"
}
}
4. 安装 Electron
在项目目录中运行以下命令来安装 Electron:
npm install
5. 启动应用程序
使用以下命令启动应用程序:
npm start
这将启动 Electron 应用程序并显示一个包含 "Hello Electron!" 的窗口。
这是一个非常基本的 Electron 应用程序示例,展示了 Electron 的基础概念和功能。更复杂的应用程序可能会包括多个窗口、自定义菜单、系统托盘图标等,所有这些都可以在 Electron 的官方文档中找到详细的指导。