electron教程
时间: 2023-07-02 16:10:51 浏览: 68
Electron 是由 GitHub 开发的一个跨平台桌面应用程序框架。它使用 Node.js 和 Chromium 技术,可以使用 HTML、CSS 和 JavaScript 构建跨平台的桌面应用程序。下面是一个简单的 Electron 应用程序教程。
## 准备工作
首先,确保已经安装了 Node.js 和 npm,可以在终端输入以下命令检查版本:
```
node -v
npm -v
```
如果没有安装,可以在 Node.js 官网下载安装。
## 创建应用程序
1. 创建一个空目录,进入该目录。
2. 在该目录下,运行以下命令创建 package.json 文件:
```
npm init
```
3. 安装 Electron:
```
npm install --save-dev electron
```
## 编写代码
在应用程序目录下创建一个名为 main.js 的文件,编写以下代码:
```javascript
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 加载 index.html 文件
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 当应用程序的所有窗口都关闭时退出
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
```
在应用程序目录下创建一个名为 index.html 的文件,编写以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
```
## 运行应用程序
在命令行中运行以下命令启动应用程序:
```
npm start
```
如果一切正常,应该会看到一个窗口打开,并显示 "Hello World!"。
以上是一个简单的 Electron 应用程序教程。如果想要深入了解 Electron 的更多功能和用法,可以参考 Electron 官方文档。