Electron 项目教程
electron使用Electron构建跨平台桌面应用程序,支持JavaScript、HTML和CSS项目地址:https://gitcode.com/gh_mirrors/el/electron
1. 项目的目录结构及介绍
Electron 项目的目录结构通常包含以下几个主要部分:
package.json
: 项目的元数据文件,包括依赖、脚本、项目名称等。main.js
: 主进程文件,负责创建窗口和管理应用生命周期。index.html
: 主窗口的 HTML 文件,用于渲染用户界面。renderer.js
: 渲染进程文件,处理用户界面逻辑。node_modules
: 存放项目依赖的目录。assets
: 存放静态资源,如图片、样式文件等。
electron-project/
├── package.json
├── main.js
├── index.html
├── renderer.js
├── node_modules/
└── assets/
├── styles.css
└── logo.png
2. 项目的启动文件介绍
main.js
main.js
是 Electron 应用的主进程文件,负责创建和管理应用窗口以及处理系统事件。以下是一个简单的 main.js
示例:
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
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
index.html
是主窗口的 HTML 文件,用于定义用户界面结构。以下是一个简单的 index.html
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electron App</title>
<link rel="stylesheet" href="assets/styles.css">
</head>
<body>
<h1>Welcome to Electron</h1>
<script src="renderer.js"></script>
</body>
</html>
3. 项目的配置文件介绍
package.json
package.json
是 Node.js 项目的配置文件,包含项目的基本信息和依赖管理。以下是一个简单的 package.json
示例:
{
"name": "electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"dependencies": {
"electron": "^16.0.0"
}
}
.electron-forge
如果使用 Electron Forge 来构建和管理项目,还会包含 .electron-forge
目录,用于配置构建和打包选项。
{
"make_targets": {
"win32": ["squirrel"],
"darwin": ["zip"],
"linux": ["deb", "rpm"]
},
"electronPackagerConfig": {
"packageManager": "npm"
}
}
以上是 Electron 项目的基本结构和配置文件介绍,希望对你理解和使用 Electron 有所帮助。
electron使用Electron构建跨平台桌面应用程序,支持JavaScript、HTML和CSS项目地址:https://gitcode.com/gh_mirrors/el/electron